动态HTML创作之一（移动对象）
通常，当为一个CSS定位元素声明新的位置时，并不会碰到什么兼容性问题。例如，要把一个名叫“myelement”的元素移动到坐标(75，50)点，只要声明新的left和top值就可以了：

myelement.left=75

myelement.top=50

但是切记 myelement 必须是一个“Pointer变量”，像这样：

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

前面已经提到，声明一个新的位置并不会出现什么不兼容性的问题，但是不管怎样，在捕捉元素的当前位置时，还是会产生一个问题。这是由于IE在储存元素的位置值时，在最后加上了“px”两个字母单位。要去掉“px”可以把单位值解析为整数：parseInt(myelement.left)

确实，每一次在变量前面都写上“parseInt()”很烦人。应该考虑一个更好的方法，这里就有一个答案：往“pointer变量”或者对象中加入属性几乎没有什么限制的，那么从现在开始就要调用这些属性。

myelement.xpos=parseInt(myelement.left)

myelement.ypos=parseInt(myelement.top)

现在，一旦需要检测当前的“left”或者“top”值，只要相应检测“myelement.xpos”和“myelement.ypos”的值就可以了。

要想改变元素的位置时，首先需要改变“xpos”和“ypos”的值，然后需要分别设置相对于“xpos”和“ypos”的值。这里有一个这样的例子：
*************************************************************
<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<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 move1() {
block.xpos=50
block.ypos=75
block.left=block.xpos
block.top=block.ypos
}

function move2() {
block.xpos=115
block.ypos=120
block.left=block.xpos
block.top=block.ypos
}

function move3() {
block.xpos=200
block.ypos=185
block.left=block.xpos
block.top=block.ypos
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">
<p>Move the block to:
<a href="javascript:move1()">(50,75)</a>-
<a href="javascript:move2()">(115,120)</a>-
<a href="javascript:move3()">(200,185)</a>
<br><a href="javascript:alert(block.xpos+','+block.ypos)">check location</a>
</p>
<div id="blockDiv" style="position:absolute;left:90;top:100;width:30;visibility:visible">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
****************************************************
当浏览器初始化时，这个图片被定位于“left:90”和“top:100”的地方，当单击几个坐标时，图片会移动到相应的坐标位置，当单击“check location”时，浏览器会弹出一个对话框，告之当前位置。
通用移动函数

在上一个例子中，每一次移动都分别编写了代码。现在如果想要把许多不同的层移动到不同的位置，我们可以建立一些通用的移动函数。

moveTo()函数

moveTo()函数先获取一个层或者对象，然后把它们直接移动到一个新的位置。

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

要把图像移动到一个新的位置，可以写上：moveTo(mysquare,50,100)
moveBy()函数

moveBy函数的工作原理有些不同，但是效果和moveTo()是一致的，它是在当前的位置加上一个值，得到最终的位置，而不是把层或对象直接移动到新的位置。

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

要把图像向右移动5个像素，并且向上移动10个像素，只需要写上：moveBy(mysquare,5,-10)

这里有一个移动对象完整的例子：
*************************************************
<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<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()">
<p>
Check Values:
<a href="javascript:alert('X:'+block.xpos)">xpos</a>,
<a href="javascript:alert('Y:'+block.ypos)">ypos</a>
<br>Visibility:
<a href="javascript:showObject(block)">show</a>,
<a href="javascript:hideObject(block)">hide</a>
<br>MoveTO:
<a href="javascript:moveTo(block,100,100)">(100,100)</a>,
<a href="javascript:moveTo(block,200,160)">(200,160)</a>,
<a href="javascript:moveTo(block,300,240)">(300,240)</a>
<br>MoveBy:
<a href="javascript:moveBy(block,10,0)">(10,0)</a>,
<a href="javascript:moveBy(block,-15,0)">(-15,0)</a>,
<a href="javascript:moveBy(block,0,15)">(0,15)</a>,
<a href="javascript:moveBy(block,0,-15)"><0,-15)</a>
</p>
<div id="blockDiv" style="position:absolute;left:100;top:100;width:30;visibility:visible">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
************************************************
上面的例子实际上总结了前面所讲的所有内容，是一个非常典型的例子。