在IE浏览器中，要想移动DIV有很多方式，通过DIV的各种属性，使用JavaScript即可。但是，在其他浏览器中也要完成这个效果，那么IE这套方法不一定能搞定了。所以，今天告诉大家一个方法和例子，能在IE，Opera，FireFox，Chrome，Safari下都能实现移动。
原理很简单，我们过去使用的移动的思路是，相对某一个div或窗体移动，使用marginTop和marginLeft属性。但是，这两个属性在IE以外的浏览器，不好用。此时我们使用left和top完成，并且是移动的相对点是浏览器窗口。这个可以多个DIV相对的，前后层的移动。他的活动范围是整个显示窗口。
在浏览器IE，Opera，Safari，Chrome，FireFox下都测试通过。
1、 首先建立一个DIV
2、 添加样式
代码：
- #move{
- position:relative;
- left:100px;
- top:100px;
- width:200px;
- height:200px;
- border:1px solid #000;
- }
3、 编写JavaScript代码：
function move(){
//获取移动的DIV对象
var obj = document.getElementById("move");
//设置样式定位属性，让div从当前文档流中拖出。
//这样，他属于整个活动窗体。可以层叠。
obj.style.position = "absolute";
//动画计数器。
var num = 0;
//获得移动div，在整个活动区域的X坐标
var left = parseInt(obj.offsetLeft);
//获得移动div，在整个活动区域的Y坐标
var top = parseInt(obj.offsetTop);
//使用定时器移动DIV
var timer = setInterval(function(){ //移动的函数
if(num==10){ //移动十次
clearInterval(timer);
}
//通过left样式属性设置。必须带单位
obj.style.left = left + num *(500 - left)/10 + "px";
//通过top样式属性设置，必须带单位
obj.style.top = top + num *(500 - top)/10 + "px";
//计数器加一
num++;
},20);
}
完整代码：
<html>
<head>
<title>
DIV移动
</title>
<style>
#move{
position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
border:1px solid #000;
}
</style>
<script>
function move(){
//获取移动的DIV对象
var obj = document.getElementById("move");
//设置样式定位属性，让div从当前文档流中拖出。
//这样，他属于整个活动窗体。可以层叠。
obj.style.position = "absolute";
//动画计数器。
var num = 0;
//获得移动div，在整个活动区域的X坐标
var left = parseInt(obj.offsetLeft);
//获得移动div，在整个活动区域的Y坐标
var top = parseInt(obj.offsetTop);
//使用定时器移动DIV
var timer = setInterval(function(){ //移动的函数
if(num==10){ //移动十次
clearInterval(timer);
}
//通过left样式属性设置。必须带单位
obj.style.left = left + num *(500 - left)/10 + "px";
//通过top样式属性设置，必须带单位
obj.style.top = top + num *(500 - top)/10 + "px";
//计数器加一
num++;
},20);
}
</script>
</head>
<body>
<div id="move">
</div>
<button οnclick="move();">Move</button>
</body>
</html>
各种浏览器测试：
IE8下：
点击按钮之后：
Opera下：
点击按钮之后：
Safari下：
点击按钮之后：
FireFox下：
点击按钮之后：
Chrome下：
点击按钮之后：