Javascript實現重力彈跳拖拽運動效果示例

本文為大家詳細介紹下使用Javascript實現重力彈跳拖拽運動的具體調用方法感興趣的朋友可以參考下哈  

　　演示地址


調用示例
var GCDM = gcdMove(oDiv);
GCDMstartMove();//開始運動
GCDMstopMove();//結束運動
該段JS代碼已經封裝好了代碼如下
簡要說明 obj為要改動的對象元素通常為某個diviSpeedXiSpeedY為div出師的橫向（右側）豎向（下）的初始速度當然也可以設為零

復制代碼 代碼如下:

　　
/**
* @Desc 重力碰撞拖拽運動 Gravity Crash Drag Move(gcdMove)
* @Author GenialX
* @URL wwwihuxucom
* @QQ
* @Date
*/
function gcdMove(obj iSpeedX iSpeedY) {
_this = this;//public identifier
//construct fun
var gcdMove;
//self defined fun
var start;
_thisstartMove;
//other var
var iTimer;
var iLastX = ;
var iLastY = ;
//construct fun
start = function() {
clearInterval(iTimer);
iTimer = setInterval(function() {
iSpeedY += ;
var l = objoffsetLeft + iSpeedX;
var t = objoffsetTop + iSpeedY;
if (t >= documentdocumentElementclientHeight objoffsetHeight) {
iSpeedY *= ;
iSpeedX *= ;
t = documentdocumentElementclientHeight objoffsetHeight;
} else if (t <= ) {
iSpeedY *= ;
iSpeedX *= ;
t = ;
}
if (l >= documentdocumentElementclientWidth objoffsetWidth) {
iSpeedX *= ;
l = documentdocumentElementclientWidth objoffsetWidth;
} else if (l <= ) {
iSpeedX *= ;
l = ;
}
if (Mathabs(iSpeedX) < ) {
iSpeedX = ;
}
if (iSpeedX == && iSpeedY == && t == documentdocumentElementclientHeight objoffsetHeight) {
clearInterval(iTimer);
}
objstyleleft = l + px;
objstyletop = t + px;
} );
}
_thisstartMove = function(){
objonmousedown = function(ev) {
clearInterval(iTimer);
var oEvent = ev || event;
var disX = oEventclientX objoffsetLeft;
var disY = oEventclientY objoffsetTop;
documentonmousemove = function(ev) {
var oEvent = ev || event;
var l = oEventclientX disX;
var t = oEventclientY disY;
objstyleleft = l + px;
objstyletop = t + px;
if(iLastX ==){
iLastX = l;
}
if(iLastY == ){
iLastY = t;
}
iSpeedX = l iLastX;
iSpeedY = t iLastY;
iLastX = l;
iLastY = t;
}
}
objonmouseup = function() {
documentonmousedown = null;
documentonmousemove = null;
documentonmouseup = null;
start();
}
start();
}
_thisstopMove = function(){
clearInterval(iTimer);
objonmousedown = null;
documentonmousemove = null;
objonmouseup = null;
iLastX = ;
iLastY = ;
iSpeedX = ;
iSpeedY = ;
disX = ;
disY = ;
}
//CONSTRUCT AREA
var gcdMove = function() {
if (!iSpeedX) {
iSpeedX = ;
}
if (!iSpeedY) {
iSpeedY = ;
}
}
gcdMove();
}

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20564.html