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


Posted in Javascript onJune 28, 2013

演示地址:
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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
在JavaScript中使用timer示例
May 08 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
jQuery随便控制任意div隐藏的方法
Jun 28 #Javascript
js实时获取系统当前时间实例代码
Jun 28 #Javascript
js复制到剪切板的实例方法
Jun 28 #Javascript
Javascript无阻塞加载具体方式
Jun 28 #Javascript
Extjs4 类的定义和扩展实例
Jun 28 #Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 #Javascript
jquery异步跨域访问代码
Jun 28 #Javascript
You might like
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jquery中change()用法实例分析
2015/02/06 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
python中sets模块的用法实例
2014/09/30 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
优秀企业获奖感言
2014/02/01 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
蓝颜请假条
2014/04/11 职场文书
《学会合作》教学反思
2014/04/12 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
教师批评与自我批评
2014/10/15 职场文书
就业推荐表导师评语
2014/12/31 职场文书
国家助学金感谢信
2015/01/21 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers