鼠标拖拽回放
- <html>
- <head>
- <title>拖拽回放</title>
- <meta charest="utf-8">
- <style>
- div{width: 80px;height: 80px;background: red;position: absolute;}
- </style>
- <script>
- window.onload=function(){
- var oInp=document.getElementsByTagName('input')[0];
- var oDiv=document.getElementsByTagName('div')[0];
- var Left=[];
- var Top=[];
- oDiv.onmousedown=function(ev){
- ev=ev || event;
- var ms_b=ev.clientX-oDiv.offsetLeft;
- var ms_t=ev.clientY-oDiv.offsetTop;
- document.onmousemove=function(ev){
- ev=ev || event;
- var currX=ev.clientX-ms_b;
- var currY=ev.clientY-ms_t;
- var Width=document.body.clientWidth || document.documentElement.cilentWidth;
- var Height=document.body.clientHeight || document.documentElement.cilentHeight;
- Left.push(currX);
- Top.push(currY);
- //console.log(Left.length);
- if(currX<0) {currX=0;}
- else if(currX>Width-oDiv.clientWidth){
- currX=Width-oDiv.clientWidth;
- }
- if(currY<0) {currY=0;}
- else if(currY>Height-oDiv.clientHeight){
- currY=Height-oDiv.clientHeight;
- }
- oDiv.style.left=currX +'px';
- oDiv.style.top=currY +'px';
- return false;
- }
- document.onmouseup=function(){
- document.onmousemove=document.onmouseup=null;
- }
- }
- var timer=null;
- oInp.onclick=function(){
- console.log(Top.length);
- var i=Left.length;
- timer=setInterval(function(){
- oDiv.style.left=Left[i] +'px';
- oDiv.style.top=Top[i] + 'px';
- i--;
- if(i==0) {
- Left=[];
- Top=[];
- clearInterval(timer);
- }
- },1)
- }
- }
- </script>
- </head>
- <body>
- <input type="button"value='回放'>
- <div></div>
- </body>
- </html>
posted on 2015-03-17 14:59 liuwenbohhh 阅读(183) 评论(0) 编辑 收藏 举报