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

 }