Javascript實作重力彈跳拖曳運動效果範例_javascript技巧

示範位址：
http://www.ihuxu.com/project/gcdmove/

呼叫範例：
var GCDM = gcdMove(oDiv ,100,0);
GCDM.startMove();//開始運動
GCDM.stopMove();//結束動作
該段JS程式碼已經封裝好了，程式碼如下：
簡單說明- obj為要改動的物件元素，通常為某個div；iSpeedX，iSpeedY為div出師的橫向（右側），垂直（下）的初始速度，當然也可以設為零。

複製程式碼 程式碼如下:

/**
* @Desc 重力碰撞拖曳運動- Gravity Crash Drag Move(gcdMove)
* @Author GenialX
* @URL www.ihuxu.com
* @QQ 2252065614 */ _this = this;//public identifier
//construct fun
var gcdMove;
//self defined fun
var gcdMove;
//self defined fun
var gcdMove;
//self defined fun
var g _this.startMove;
//other var
var iTimer;
var iLastX = 0;
var iLastY = 0;
//construct fun
start = function() {
clearInterval(iTimer);
iTimer = setInterval(function() {
iSpeedY = 3;
var l = obj.offsetLeft iSpeedX;
var t = obj.YsetTop if if (t >= document.documentElement.clientHeight - obj.offsetHeight) {
iSpeedY *= -0.8;
iSpeedX *= 0.8;
t = document.documentElement.cliclientHeight -obj. >} else if (t iSpeedY *= -1;
iSpeedX *= 0.8;
t = 0;
}
if (l >= document.documentElement .clientWidth - obj.offsetWidth) {
iSpeedX *= -0.8;
l = document.documentElement.clientWidth - obj.offsetWidth;
} else if (l } else if (l l = 0;
}
if (Math.abs(iSpeedX) iSpeedX = 0;
}
if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight) {
clearInterval(iTimer);
}
obj.style.left = l 'px';
obj. .style.top = t 'px';
}, 30);
}
_this.startMove = function(){
obj.onmousedown = function(ev) {
clearInterval( iTimer);
var oEvent = ev || event;
var disX = oEvent.clientX - obj.offsetLeft;
var disY = oEvent.clientY - obj.offsetTop;
document. (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
obj.style.left = l ' px';
obj.style.top = t 'px';
if(iLastX ==0){
iLastX = l;
}
if(iLastY == 0){
iLastY = t;
}
iSpeedX = l - iLastX;
iSpeedY = t - iLastY;
iLastX = l;
iLastY = t;
iLastX = l;
iLastY = t;
;
; }
obj.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
start();
start();
}
_this.stopMove = function(){
clearInterval(iTimer);
obj.onmousedown = null;
document.onmousemove = null; >obj.onmouseup = null;
iLastX = 0;
iLastY = 0;
iSpeedX = 0;
iSpeedY = 0;
disX = 0;
iSpeedY = 0;
disX = 0;
disY = 00; 🎜>}
//CONSTRUCT AREA
var gcdMove = function() {
if (!iSpeedX) {
iSpeedX = 0;
}
if (>iSpeedX = 0;
}
if (! 🎜>iSpeedY = 0;
}
}
gcdMove();
}