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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
javascript实现微信分享
Dec 23 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
前端开发之便利店收银系统代码
Dec 27 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
微信支付的开发流程详解
2016/09/13 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
python读取oracle函数返回值
2016/07/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python爬虫添加请求头代码实例
2019/12/28 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
运动员入场前导词
2015/07/20 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
用Python创建简易网站图文教程
2021/06/11 Python