|
DHTML动态网页简明教程 DIV 元素的移动 作者:ahao DIV 元素的移动给 DIV 元素一个新的地址在两种浏览器上是没有区别的. 移动一个名字为 myelement 的元素到新的位置 (100, 50), 你只要变换这个元素有关性质的值就行了. myelement.left = 100 myelement.top = 50 但你可别忘记了这个 myelement 是一个通用指针. 它是这样得到的. function init() { if (ns4) myelement = document.myelementDiv if (ie4) myelement = myelementDiv.style } 从现在开始我们不再重复了, 在以后的课文中我们老要用到它. 尽管改变元素的位置没有兼容问题, 但得到元素的当前的位置还是有点儿不一样的. 这是因为 IE 储存元素位置的时候总在值的后面加 "px". 我们可用如下方法处理 假如你想得到 myelement.left 你最好写成 parseInt(myelement.left) 比如你想把元素的左和上的位置用一个预警 (alert) 窗口告诉大家 alert(parseInt(myelement.left)+", "+parseInt(myelement.top)) 给元素加新的性质每次都写 parseInt() 好象挺烦的. 有没有好点儿的办法呢? 其实一个简单的办法就是把它记住. JavaScript 可以让你无限制的给元素添加新的性质. 比如, 我们把元素当前的位置记在如下两个新的性质xpos, ypos 里 myelement.xpos = parseInt(myelement.left) myelement.ypos = parseInt(myelement.top) 这样, 以后你想要知道元素的位置, 只要看 xpos 和 ypos 就行了. 比如 alert(myelement.xpos + "," + myelement.ypos) 通用移动子程序下面这个子程序用来移动一个元素到位置 (x, y) moveTo() Function function moveTo(obj,x,y) { obj.xpos = x obj.left = obj.xpos obj.ypos = y obj.top = obj.ypos } 这个子程序用起来很容易, 你仅仅需要告诉他 layer 的指针名字和新的位置 x, y 就行了. 比如你有如下的 layer 指针 if (ns4) mysquare = document.mysquareDiv if (ie4) mysquare = mysquareDiv.style mysquare.xpos = parseInt(mysquare.left) mysquare.ypos = parseInt(mysquare.top) 如果你要把它移动到一个新的地址 (50, 100), 你可以用如下的语句完成. moveTo(mysquare,50,100) moveBy() Function 这个子程序跟 moveTo() 的区别在于它是把 layer 相对于当前的位置 x, y而不是窗口的坐标 x, y. function moveBy(obj,x,y) { obj.xpos += x obj.left = obj.xpos obj.ypos += y obj.top = obj.ypos } 比如把上述元素往右边移动 5 pixels 和往上移动 10 pixels. 你可以写出 moveBy(mysquare,5,-10)
|