鼠标拖拽回放

鼠标拖拽回放
1. <html>
2. <head>
3. <title>拖拽回放</title>
4. <meta charest="utf-8">
5. <style>
6. div{ 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)
58. }
59. }
60. </script>
61. </head>
62. <body>
63. <input type="button"value='回放'>
64. <div></div>
65. </body>
66. </html>
相关阅读:
Android Activity生命周期
 Android 横屏切换竖屏Activity的生命周期(转)
（引用）mysql总结（二）
（转载）mysql指令总结
 （引用）性能测试没有告诉你的
 参数化（引用）
（引用）什么时候开展性能（二）
（引用）什么时候开展性能（一）
性能测试中容易混淆的概念
 浏览器内核
原文地址：https://www.cnblogs.com/liuwenbohhh/p/4344421.html