码迷，mamicode.com
首页 > 其他好文 > 详细

鼠标拖拽回放

时间：2015-03-17 15:29:59      阅读：148      评论：0      收藏：0      [点我收藏+]

标签：

  1. <html>
  2.         <head>
  3.                 <title>拖拽回放</title>
  4.                 <meta charest="utf-8">
  5.                 <style>
  6.                         div{width: 80px;height: 80px;background: red;position: absolute;}
  7.                 </style>
  8.                 <script>
  9.                         window.onload=function(){
  10.                                 var oInp=document.getElementsByTagName(‘input‘)[0];
  11.                                 var oDiv=document.getElementsByTagName(‘div‘)[0];
  12.                                 var Left=[];
  13.                                 var Top=[];
  14.                                 oDiv.onmousedown=function(ev){
  15.                                         ev=ev || event;
  16.                                         var ms_b=ev.clientX-oDiv.offsetLeft;
  17.                                         var ms_t=ev.clientY-oDiv.offsetTop;
  18.                                         document.onmousemove=function(ev){
  19.                                                 ev=ev || event;
  20.                                                 var currX=ev.clientX-ms_b;
  21.                                                 var currY=ev.clientY-ms_t;
  22.                                                 var Width=document.body.clientWidth || document.documentElement.cilentWidth;
  23.                                                 var Height=document.body.clientHeight || document.documentElement.cilentHeight;
  24.                                                 Left.push(currX);
  25.                                                 Top.push(currY);
  26.                                                 //console.log(Left.length);
  27.                                                 if(currX<0) {currX=0;}
  28.                                                 else if(currX>Width-oDiv.clientWidth){
  29.                                                         currX=Width-oDiv.clientWidth;
  30.                                                 }
  31.                                                 if(currY<0) {currY=0;}
  32.                                                 else if(currY>Height-oDiv.clientHeight){
  33.                                                         currY=Height-oDiv.clientHeight;
  34.                                                 }
  35.                                                 oDiv.style.left=currX +‘px‘;
  36.                                                 oDiv.style.top=currY +‘px‘;
  37.                                                 return false;
  38.                                         }
  39.                                         document.onmouseup=function(){
  40.                                                 document.onmousemove=document.onmouseup=null;
  41.                                         }
  42.                                 }
  43.                                 var timer=null;
  44.                                 oInp.onclick=function(){
  45.                                         console.log(Top.length);
  46.                                         var i=Left.length;
  47.                                         timer=setInterval(function(){
  48.                                                 oDiv.style.left=Left[i] +‘px‘;
  49.                                                 oDiv.style.top=Top[i] + ‘px‘;
  50.                                                 i--;
  51.                                                 if(i==0) {
  52.                                                         Left=[];
  53.                                                         Top=[];
  54.                                                         clearInterval(timer);
  55.                                                 }
  56.                                         },1)
  57.                                         
  58.                                 }
  59.                         }
  60.                 </script>
  61.         </head>
  62.         <body>
  63.                 <input type="button"value=‘回放‘>
  64.                 <div></div>
  65.         </body>
  66. </html>

鼠标拖拽回放

标签：

原文地址：http://www.cnblogs.com/liuwenbohhh/p/4344421.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！