css代碼
代碼如下:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: "micsoft yahei","微軟雅黑";
font-size: 15px;
}
div{
width: 50px;
height: 50px;
background: #f00;
border-radius:5px ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
position: absolute;
top: 60px;
left: 30px;
}
input{
position: absolute;
top: 10px;
left: 10px;
padding: 3px;
cursor: pointer;
}
</style>
html代碼
代碼如下:
<body>
<input type="button" value="原路返回"/>
<div></div>
</body>
javascript代碼
代碼如下:
<script type="text/javascript">
//1、以鼠標在div上點擊觸發為開始
//2、點擊鼠標移動時觸發鼠標移動事件 向數組內注入數據（移動的坐標）
//3、以鼠標從div上移開為結束
//4、點擊“原路返回”按鈕遍歷數組（移動的坐標） 定時觸發數組內的坐標移動div 達到”返回“的功能
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var oBtn=document.getElementsByTagName("input")[0];
var time=null,arrTop=[],arrLeft=[];
oDiv.onmousedown=function(ev){
var event=ev || window.event;
//獲取鼠標在div內的坐標
var disX=event.clientX-oDiv.offsetLeft;
var disY=event.clientY-oDiv.offsetTop;
arrTop=[60];
arrLeft=[30];
document.onmousemove=function(ev){
var event=ev || window.event;
//獲取拖拽後鼠標的位置
var l=event.clientX;
var t=event.clientY;
//把拖拽後的位置存進數組裡面，用拖拽後鼠標的位置減去鼠標在物體上的位置，就是拖拽後物體的位置
arrLeft.push(l-disX);
arrTop.push(t-disY);
oDiv.style.left=l-disX +"px";
oDiv.style.top=t-disY +"px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
}
//原路返回的核心就是把移動時的坐標記錄下來，然後進行數組重排，並設定定時器把數組內的搞寬賦值給物體。
oBtn.onclick=function(){
arrTop.reverse();//重排
arrLeft.reverse();//重排
var i=0;
oBtn.time=setInterval(function(){
oDiv.style.top=arrTop[i]+"px";
oDiv.style.left=arrLeft[i]+"px";
i++;
if(i==arrTop.length){
clearInterval(oBtn.time);
arrTop=[];
arrLeft=[];
}
},20);
}
}
</script>