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

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

  }