css代码 复制代码 代码如下: <br /> * {<br /> margin: 0px;<br /> padding: 0px;<br /> font-family: "micsoft yahei","微软雅黑";<br /> font-size: 15px;<br /> }<br /> div{<br /> width: 50px;<br /> height: 50px;<br /> background: #f00;<br /> border-radius:5px ;<br /> -moz-border-radius: 5px;<br /> -webkit-border-radius: 5px;<br /> cursor: pointer;<br /> position: absolute;<br /> top: 60px;<br /> left: 30px;<br /> }<br /> input{<br /> position: absolute;<br /> top: 10px;<br /> left: 10px;<br /> padding: 3px;<br /> cursor: pointer;<br /> }<br /> html代码 复制代码 代码如下: javascript代码 复制代码 代码如下: <br /> //1、以鼠标在div上点击触发为开始<br /> //2、点击鼠标移动时触发鼠标移动事件 向数组内注入数据（移动的坐标）<br /> //3、以鼠标从div上移开为结束<br /> //4、点击“原路返回”按钮遍历数组（移动的坐标） 定时触发数组内的坐标移动div 达到”返回“的功能<br /> window.onload=function(){<br /> var oDiv=document.getElementsByTagName("div")[0];<br /> var oBtn=document.getElementsByTagName("input")[0];<br /> var time=null,arrTop=[],arrLeft=[];<br /> oDiv.onmousedown=function(ev){<br /> var event=ev || window.event;<br /> //获取鼠标在div内的坐标<br /> var disX=event.clientX-oDiv.offsetLeft;<br /> var disY=event.clientY-oDiv.offsetTop;<br /> arrTop=[60];<br /> arrLeft=[30];<br /> document.onmousemove=function(ev){<br /> var event=ev || window.event;<br /> //获取拖拽后鼠标的位置<br /> var l=event.clientX;<br /> var t=event.clientY;<br /> //把拖拽后的位置存进数组里面，用拖拽后鼠标的位置减去鼠标在物体上的位置，就是拖拽后物体的位置<br /> arrLeft.push(l-disX);<br /> arrTop.push(t-disY);<br /> oDiv.style.left=l-disX +"px";<br /> oDiv.style.top=t-disY +"px";<br /> };<br /> document.onmouseup=function(){<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> };<br /> return false;<br /> }<br /> //原路返回的核心就是把移动时的坐标记录下来，然后进行数组重排，并设定定时器把数组内的搞宽赋值给物体。<br /> oBtn.onclick=function(){<br /> arrTop.reverse();//重排<br /> arrLeft.reverse();//重排<br /> var i=0;<br /> oBtn.time=setInterval(function(){<br /> oDiv.style.top=arrTop[i]+"px";<br /> oDiv.style.left=arrLeft[i]+"px";<br /> i++;<br /> if(i==arrTop.length){<br /> clearInterval(oBtn.time);<br /> arrTop=[];<br /> arrLeft=[];<br /> }<br /> },20);<br /> }<br /> }<br />
