javascript 实现 原路返回

前端之家收集整理的这篇文章主要介绍了javascript 实现 原路返回前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

css代码

代码如下:

HTML代码

代码如下:

javascript代码

代码如下:
功能 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); } }

原文链接:https://www.f2er.com/js/56172.html

猜你在找的JavaScript相关文章