当前位置:首页 »“秋了秋”个人博客 » 前端编程 » JavaScript完美弹性运动+拖拽

JavaScript完美弹性运动+拖拽

作者:秋了秋 发表时间:2016年01月28日

代码详情:

请拖动我

复制代码
  1. <style>
  2. #div1{background:green;width:100px;height:100px;border-radius:50%;background-size: cover;position:absolute;cursor:default;top:100px;left:100px;color:white;line-height:100px;text-align:center;}
  3. </style>
  4. <div id="div1">请拖动我</div>
  5. <script>
  6. window.onload=function(){
  7. var oDiv=document.getElementById('div1'),width=oDiv.offsetWidth,height=oDiv.offsetWidth;
  8. var speedX=0,speedY=0,lastX=0,lastY=0;
  9. var scwidth=document.documentElement.clientWidth||document.body.clientWidth;
  10. var scheight=document.documentElement.clientHeight||document.body.clientHeight;
  11. var timer=null;
  12.  
  13. oDiv.onmousedown=function(ev){//拖拽功能
  14. clearInterval(timer);
  15. var oEvt=ev||event;//这写法为了兼容,你懂的
  16. var disX=oEvt.clientX-oDiv.offsetLeft;//获取鼠标相对于目标的位置并保存到变量,下同
  17. var disY=oEvt.clientY-oDiv.offsetTop;
  18.  
  19. document.onmousemove=function(ev){//'按住'鼠标在页面上移动的时候...
  20. var oEvt=ev||event;
  21. oDiv.style.left=oEvt.clientX-disX+'px';//让目标定位到这个位置,下同
  22. oDiv.style.top=oEvt.clientY-disY+'px';
  23. /**判断边界处理**/
  24. if((oEvt.clientX+width-disX)>=scwidth){
  25. oDiv.style.left=scwidth-width+'px';
  26. }
  27. else if((oEvt.clientX-disX)<=0){
  28. oDiv.style.left=0;
  29. }
  30. if((oEvt.clientY+height-disY)>=scheight){
  31. oDiv.style.top=scheight-height+'px';
  32. }
  33. else if((oEvt.clientY-disY)<=0){
  34. oDiv.style.top=0;
  35. }
  36.  
  37. speedX=oDiv.offsetLeft-lastX;//移动一瞬间的差异,用于定义速度,差异越大,速度越大,同下
  38. speedY=oDiv.offsetTop-lastY;
  39.  
  40. lastX=oDiv.offsetLeft;//获取此时此刻目标的位置
  41. lastY=oDiv.offsetTop;
  42.  
  43. };
  44. document.onmouseup=function(){//注意了,松手了~
  45. document.onmouseup=document.onmousemove=null;//注销抬起左键和按住鼠标左键&移动事件
  46. oDiv.releaseCapture && oDiv.releaseCapture();//释放鼠标监控
  47. move('div1');//执行运动函数
  48. };
  49. oDiv.setCapture && oDiv.setCapture();//监控整个window系统的鼠标事件,并全部指向这个oDiv
  50. return false;//解除默认行为,如按住鼠标移动时选中文字等
  51. };
  52.  
  53. function move(tarGet){//运动函数
  54. clearInterval(timer);
  55. var oDiv=document.getElementById(tarGet);
  56. var fnMove=function(){
  57. speedY+=3;//松手之后以3的加速继续运行
  58. var t=oDiv.offsetTop+speedY;
  59. var l=oDiv.offsetLeft+speedX;
  60. /**判断边界**/
  61. if(t>=scheight-oDiv.offsetHeight){
  62. speedY*=-0.95;//设置弹性系数,同下
  63. speedX*=0.95;
  64. t=scheight-oDiv.offsetHeight;
  65. }else if(t<=0){
  66. speedY*=-0.95;
  67. speedX*=0.95;
  68. t=0;
  69. }
  70.  
  71. if(l>=scwidth-oDiv.offsetWidth){
  72. speedX*=-0.95;
  73. speedY*=0.95;
  74. l=scwidth-oDiv.offsetWidth;
  75. }else if(l<=0){
  76. speedX*=-0.95;
  77. speedY*=0.95;
  78. l=0;
  79. }
  80.  
  81. oDiv.style.top=t+'px';//定位目标
  82. oDiv.style.left=l+'px';
  83.  
  84. if(Math.abs(speedX)<1) speedX=0;//在值够小的情况下强制让它变成0,同下
  85. if(Math.abs(speedY)<1) speedY=0;
  86.  
  87. if(speedX==0 && speedY==0 && t==scheight-oDiv.offsetHeight){
  88. clearInterval(timer);//清除定时器
  89. }
  90. }
  91. timer=setInterval(fnMove, 30);
  92. }
  93. };
  94. </script>
复制代码
0
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/430.html
目录: 前端编程标签: 弹性运动 7189次阅读

检测到你在使用低版本浏览器不支持自动播放,请手动点击播放,将为你使用特制播放源播放。

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里