Javascript实现重力弹跳拖拽运动效果

声明：

By：GenialX

个人主页：胡旭博客 - www.ihuxu.com

QQ：2252065614

演示地址：

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
 * @Date 2013.06.22
 */

function gcdMove(obj, iSpeedX, iSpeedY) {

    _this = this;//public identifier

    //construct fun
    var gcdMove;
    //self defined fun
    var start;
    _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.offsetTop + iSpeedY;

            if (t >= document.documentElement.clientHeight - obj.offsetHeight) {
                iSpeedY *= -0.8;
                iSpeedX *= 0.8;
                t = document.documentElement.clientHeight - obj.offsetHeight;
            } else if (t <= 0) {
                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 <= 0) {
                iSpeedX *= -0.8;
                l = 0;
            }

            if (Math.abs(iSpeedX) < 1) {
                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.onmousemove = function(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;

        }
    }

    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;
        disY = 0;
    }
    
    //CONSTRUCT AREA
    var gcdMove = function() {

        if (!iSpeedX) {
            iSpeedX = 0;
        }
        if (!iSpeedY) {
            iSpeedY = 0;
        }
    }
    
    gcdMove();
}