移动
翻译:QQlan

为你的CSS-P元素重新定位. 移动元素不存在兼容问题.

移动"myelement"元素到坐标(100,50),只需要简单的赋新的左坐标和上坐标的值.

myelement.left = 100
myelement.top = 50


不要忘记myelement必须像这样定义成一个pointer variable

function init() {
    if (ns4) myelement = document.myelementDiv
    if (ie4) myelement = myelementDiv.style
}


从现在起, 这些将是以后所有的例子中必定有的, 请别忘记.
正如前面所说的,重定向不存在兼容问题. 但是想要获得当前元素的坐标信息,则比较麻烦. 主要是因为IE定义元素位置时, 有"px"附在该值的后面 (详见上次的范例).

为了摆脱"px", 我们必须解析这个值.

代替 myelement.left
你必须写: parseInt(myelement.left)

举例来说, 如果你要弹出一个message box上面显示该元素左边和上边的坐标, 你可以写成:
alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))


增加新的属性

相信我, 在变量前总是写parseInt() 非常麻烦, 很快你会问你自己,是不是有更好的方法?...这里, 我有一个好办法.

没有什么可以阻止你增加新的属性到我们的pointer variable, 或者object.

建议是: 保留当前元素赋给左坐标和上坐标分离属性. 然后象我下面做列举的为它们赋上新值:

myelement.xpos = parseInt(myelement.left)
myelement.ypos = parseInt(myelement.top)


现在,经过重新point,你将不需要寻找左边或者上边的位置只需要检查 myelement.xpos和myelement.ypos的值. 我们的新的 alert() 如下:

alert(myelement.xpos + "," + myelement.ypos)

当你想要改变元素的位置, 首先必须改变xpos 和 ypos的值, 然后分别赋值给left & top. 比如:

function move() {
    myelement.xpos = 200
    myelement.ypos = -40
    myelement.left = myelement.xpos
    myelement.top = myelement.ypos
}


你必须经常保持xpos , ypos和left , top 值的一致, 这样当你核对 myelement.xpos, 你得到的值始终和[b] myelement.left 相同.

不太难是吧? 将来的每一个范例中将包括这些. 也许看上去, 一大堆的变量意义不大, 但是当你需要处理更复杂的事件, 这些技巧使你的代码更灵活有效.

旁注: 你也许奇怪为什么不用x , y 而使用 xpos, ypos .... . 事实上, NS内置了CSS-P的一些属性. 如果使用x , y , 那么这些值总是被存储为integers. 你也许认为"谁在乎呢?"... 但是如果你的方位值不仅仅需要整数值(比如还需要带小数的,或者其他.) 那么使用x , y 就无法实现.

常规移动functions

上个例子的代码属于"hard-coded"-- 我为每一个移动写了不同的functions. 当然如果你要移动很多层, 可以不需要写这么多次的functions. 我们可以创建一个generic functions.

The move To() Function

moveTo() Function 获取你的 layer/object , 移动到新的位置.


function moveTo(obj,x,y) {
    obj.xpos = x
    obj.left = obj.xpos
    obj.ypos = y
    obj.top = obj.ypos
}
使用这个function 非常容易-- 你所需要做的只是告诉它 layer/object 使用新的x 和 y 坐标位置. 例如, 如果你初始化你的layer:


if (ns4) mysquare = document.mysquareDiv
if (ie4) mysquare = mysquareDiv.style
mysquare.xpos = parseInt(mysquare.left)
mysquare.ypos = parseInt(mysquare.top)


然后移动这个矩形到新的地点.

moveTo(mysquare,50,100)


The moveBy() Function

moveBy 的写法和刚才学过的一样, 不过, 这里用x, y 取代了直接的坐标值.


function moveBy(obj,x,y) {
    obj.xpos += x
    obj.left = obj.xpos
    obj.ypos += y
    obj.top = obj.ypos
}

如果想要把mysquare 向下移动10 pixels, 向右移动5 pixels, 那么:

moveBy(mysquare,5,-10)


范例: moving2.html (http://www.dansteinman.com/dynduo/examples/moving2.html) - 使用了 moveBy() and moveTo()





-------------------------------------------------------------
5DMedia版权所有, 转载请注明出处!