我们已经学到了
- 定义一个 DIV 元素， 以及用 CSS 来给出它的性质 (CSS
位置设定)
- 如何知道哪种浏览器正在被使用 (通用程序)
- 如何设立一个通用的指针变量指向一个 DIV 元素 (通用程序)
- 以及如何显示或隐蔽这个 DIV 元素 (显示和隐蔽)
这一节我们将告诉你如何移动这个 DIV 到一个特定的地方. 请你记
住我们的目标是写出在 NetScape 和 Internet
Explore 上兼容的程序
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)
下面这个程序总结了以上几课所有的内容
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
}
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
Check Values:
<A HREF="javascript:alert('X: ' + block.xpos)">横向位置</A>,
<A HREF="javascript:alert('Y: ' + block.ypos)">竖向位置</A>
<BR>Visibility:
<A HREF="javascript:showObject(block)">显示</A>,
<A HREF="javascript:hideObject(block)">隐蔽</A>
<BR>移动到 MoveTo:
<A HREF="javascript:moveTo(block,100,200)">(100,200)</A>,
<A HREF="javascript:moveTo(block,200,260)">(200,260)</A>,
<A HREF="javascript:moveTo(block,300,340)">(300,340)</A>
<BR>相对移动 MoveBy:
<A HREF="javascript:moveBy(block,10,0)">(10,0)</A>,
<A HREF="javascript:moveBy(block,-10,0)">(-10,0)</A>,
<A HREF="javascript:moveBy(block,0,10)">(0,10)</A>,
<A HREF="javascript:moveBy(block,0,-10)">(0,-10)</A>
<DIV ID="blockDiv"
STYLE="position:absolute; left:100; top:200;
width:30; visibility:visible;">
<IMG SRC="../photo2/bj06.jpg" BORDER=0>
</DIV>
</BODY>
</HTML>
| |
点这里 看上面的范例.
|