Javascript实现重力弹跳拖拽运动效果示例_Javascript教程-查字典教程网
Javascript实现重力弹跳拖拽运动效果示例
Javascript实现重力弹跳拖拽运动效果示例
发布时间:2016-12-30 来源:查字典编辑
摘要:演示地址:http://www.ihuxu.com/project/gcdmove/调用示例:varGCDM=gcdMove(oDiv,10...

演示地址:

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

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类