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();
}