在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、  添加样式

代码：

 
  
  1. #move{  
  2.          position:relative;  
  3.          left:100px;  
  4.          top:100px;  
  5.          width:200px;  
  6.          height:200px;  
  7.          border:1px solid #000;  
  8.   }  
 
  
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下：
 
  
 
 
  
 
 
  
点击按钮之后：