在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、 添加樣式
代碼：
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 onclick="move();">Move</button>
</body>
</html>
各種瀏覽器測試：
IE8下：
點擊按鈕之後：
Opera下：
點擊按鈕之後：
Safari下：
點擊按鈕之後：
FireFox下：
點擊按鈕之後：
Chrome下：
點擊按鈕之後：
