聲明：

By：GenialX

個人主頁：胡旭博客?- www.ihuxu.com

QQ：2252065614

演示地址：

http://www.ihuxu.com/project/gcdmove/

調(diào)用示例：

var GCDM = gcdMove(oDiv,100,0);

GCDM.startMove();//開始運動

GCDM.stopMove();//結(jié)束運動

該段JS代碼已經(jīng)封裝好了，代碼如下：

簡要說明 -?obj為要改動的對象元素，通常為某個div；iSpeedX，iSpeedY為div出師的橫向（右側(cè)），豎向（下）的初始速度，當然也可以設(shè)為零。

1 /** 2 * @Desc 重力碰撞拖拽運動 - Gravity Crash Drag Move(gcdMove) 3 * @Author GenialX 4 * @URL www.ihuxu.com 5 * @QQ 2252065614 6 * @Date 2013.06.22 7 */ 8 9 function gcdMove(obj, iSpeedX, iSpeedY) { 10 11 _this = this;//public identifier 12 13 //construct fun 14 var gcdMove; 15 //self defined fun 16 var start; 17 _this.startMove; 18 //other var 19 var iTimer; 20 var iLastX = 0; 21 var iLastY = 0; 22 23 //construct fun 24 start = function() { 25 clearInterval(iTimer); 26 27 iTimer = setInterval(function() { 28 29 iSpeedY += 3; 30 31 var l = obj.offsetLeft + iSpeedX; 32 var t = obj.offsetTop + iSpeedY; 33 34 if (t >= document.documentElement.clientHeight - obj.offsetHeight) { 35 iSpeedY *= -0.8; 36 iSpeedX *= 0.8; 37 t = document.documentElement.clientHeight - obj.offsetHeight; 38 } else if (t <= 0) { 39 iSpeedY *= -1; 40 iSpeedX *= 0.8; 41 t = 0; 42 } 43 44 if (l >= document.documentElement.clientWidth - obj.offsetWidth) { 45 iSpeedX *= -0.8; 46 l = document.documentElement.clientWidth - obj.offsetWidth; 47 } else if (l <= 0) { 48 iSpeedX *= -0.8; 49 l = 0; 50 } 51 52 if (Math.abs(iSpeedX) < 1) { 53 iSpeedX = 0; 54 } 55 56 if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight) { 57 clearInterval(iTimer); 58 } 59 60 obj.style.left = l + 'px'; 61 obj.style.top = t + 'px'; 62 63 }, 30); 64 } 65 66 _this.startMove = function(){ 67 obj.onmousedown = function(ev) { 68 69 clearInterval(iTimer); 70 71 var oEvent = ev || event; 72 73 var disX = oEvent.clientX - obj.offsetLeft; 74 var disY = oEvent.clientY - obj.offsetTop; 75 76 document.onmousemove = function(ev) { 77 var oEvent = ev || event; 78 79 var l = oEvent.clientX - disX; 80 var t = oEvent.clientY - disY; 81 82 obj.style.left = l + 'px'; 83 obj.style.top = t + 'px'; 84 85 if(iLastX ==0){ 86 iLastX = l; 87 } 88 if(iLastY == 0){ 89 iLastY = t; 90 } 91 iSpeedX = l - iLastX; 92 iSpeedY = t - iLastY; 93 94 iLastX = l; 95 iLastY = t; 96 97 } 98 } 99 100 obj.onmouseup = function() { 101 document.onmousedown = null; 102 document.onmousemove = null; 103 document.onmouseup = null; 104 start(); 105 } 106 start(); 107 } 108 109 _this.stopMove = function(){ 110 clearInterval(iTimer); 111 obj.onmousedown = null; 112 document.onmousemove = null; 113 obj.onmouseup = null; 114 iLastX = 0; 115 iLastY = 0; 116 iSpeedX = 0; 117 iSpeedY = 0; 118 disX = 0; 119 disY = 0; 120 } 121 122 //CONSTRUCT AREA 123 var gcdMove = function() { 124 125 if (!iSpeedX) { 126 iSpeedX = 0; 127 } 128 if (!iSpeedY) { 129 iSpeedY = 0; 130 } 131 } 132 133 gcdMove(); 134 }

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/wuniaoheart/p/3159061.html

總結(jié)

以上是生活随笔為你收集整理的Javascript实现重力弹跳拖拽运动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。