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 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
常用jQuery代码分享
Jul 14 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详解react组件通讯方式(多种)
May 06 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
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
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
理解javascript模块化
2016/03/28 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Python如何读写字节数据
2020/08/05 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
店长岗位的工作内容
2013/11/12 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
2014年营销工作总结
2014/11/22 职场文书
2014年就业工作总结
2014/11/26 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
公司与个人合作协议书
2016/03/19 职场文书