Javascript实现重力弹跳拖拽运动效果
声明:
By:GenialX
个人主页:胡旭博客 - www.ihuxu.com
QQ:2252065614
演示地址:
http://www.ihuxu.com/project/gcdmove/
调用示例:
var GCDM = gcdMove(oDiv,100,0);
GCDM.startMove();//开始运动
GCDM.stopMove();//结束运动
该段JS代码已经封装好了,代码如下:
简要说明 - obj为要改动的对象元素,通常为某个div;iSpeedX,iSpeedY为div出师的横向(右侧),竖向(下)的初始速度,当然也可以设为零。
1 /** 2 * @Desc 重力碰撞拖拽运动 - Gravity Crash Drag Move(gcdMove) 3 * @Author GenialX 4 * @URL www.ihuxu.com 5 * @QQ 2252065614 6 * @Date 2013.06.22 7 */ 8 9 function gcdMove(obj, iSpeedX, iSpeedY) { 10 11 _this = this;//public identifier 12 13 //construct fun 14 var gcdMove; 15 //self defined fun 16 var start; 17 _this.startMove; 18 //other var 19 var iTimer; 20 var iLastX = 0; 21 var iLastY = 0; 22 23 //construct fun 24 start = function() { 25 clearInterval(iTimer); 26 27 iTimer = setInterval(function() { 28 29 iSpeedY += 3; 30 31 var l = obj.offsetLeft + iSpeedX; 32 var t = obj.offsetTop + iSpeedY; 33 34 if (t >= document.documentElement.clientHeight - obj.offsetHeight) { 35 iSpeedY *= -0.8; 36 iSpeedX *= 0.8; 37 t = document.documentElement.clientHeight - obj.offsetHeight; 38 } else if (t <= 0) { 39 iSpeedY *= -1; 40 iSpeedX *= 0.8; 41 t = 0; 42 } 43 44 if (l >= document.documentElement.clientWidth - obj.offsetWidth) { 45 iSpeedX *= -0.8; 46 l = document.documentElement.clientWidth - obj.offsetWidth; 47 } else if (l <= 0) { 48 iSpeedX *= -0.8; 49 l = 0; 50 } 51 52 if (Math.abs(iSpeedX) < 1) { 53 iSpeedX = 0; 54 } 55 56 if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight) { 57 clearInterval(iTimer); 58 } 59 60 obj.style.left = l + 'px'; 61 obj.style.top = t + 'px'; 62 63 }, 30); 64 } 65 66 _this.startMove = function(){ 67 obj.onmousedown = function(ev) { 68 69 clearInterval(iTimer); 70 71 var oEvent = ev || event; 72 73 var disX = oEvent.clientX - obj.offsetLeft; 74 var disY = oEvent.clientY - obj.offsetTop; 75 76 document.onmousemove = function(ev) { 77 var oEvent = ev || event; 78 79 var l = oEvent.clientX - disX; 80 var t = oEvent.clientY - disY; 81 82 obj.style.left = l + 'px'; 83 obj.style.top = t + 'px'; 84 85 if(iLastX ==0){ 86 iLastX = l; 87 } 88 if(iLastY == 0){ 89 iLastY = t; 90 } 91 iSpeedX = l - iLastX; 92 iSpeedY = t - iLastY; 93 94 iLastX = l; 95 iLastY = t; 96 97 } 98 } 99 100 obj.onmouseup = function() { 101 document.onmousedown = null; 102 document.onmousemove = null; 103 document.onmouseup = null; 104 start(); 105 } 106 start(); 107 } 108 109 _this.stopMove = function(){ 110 clearInterval(iTimer); 111 obj.onmousedown = null; 112 document.onmousemove = null; 113 obj.onmouseup = null; 114 iLastX = 0; 115 iLastY = 0; 116 iSpeedX = 0; 117 iSpeedY = 0; 118 disX = 0; 119 disY = 0; 120 } 121 122 //CONSTRUCT AREA 123 var gcdMove = function() { 124 125 if (!iSpeedX) { 126 iSpeedX = 0; 127 } 128 if (!iSpeedY) { 129 iSpeedY = 0; 130 } 131 } 132 133 gcdMove(); 134 }
转载于:https://www.cnblogs.com/wuniaoheart/p/3159061.html
Javascript实现重力弹跳拖拽运动效果相关推荐
- react实现的点击拖拽元素效果
之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...
- 贝塞尔曲线(Bezier)之 QQ 消息拖拽动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- android qq消息数 拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现
好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...
- 利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局
1 实现效果 对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势 ...
- android开发之仿QQ拖拽界面效果(侧滑面板)
仿QQ拖拽界面效果(侧滑面板),我们一般继承Layout,不会直接去继承ViewGroup,而是继承FrameLayout,为什么五大布局我们偏偏只继承FrameLayout呢? 第一,FrameLa ...
- Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例
效果图: 一.实现思路 在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效 ...
- BHO,C#实现了超级拖拽的效果
BHO,C#实现了超级拖拽的效果. 分类: C# 2013-12-10 22:49 167人阅读 评论(0) 收藏 举报 BHO 我一般习惯用IE,以前一直是搭配着IEPRO用的,主要用里面的鼠标手势 ...
- ToolStrip控件左右拖拽移动效果实现
1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位. 2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1 ...
- 突袭HTML5之Javascript API扩展4 - 拖拽
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域. 很多javascript都类似实现了相关的功能,例如,jQueryUI的drag and drop组件.在 ...
最新文章
- 报名 | 大数据如何提升保险客户体验思享会
- caffe的prototxt文件
- ionic移动开发流程api
- Objective-C中class、Category、Block的介绍
- db2嵌套查询效率_db2性能优化
- gnss单频软件接收机应用与编程_GNSS/GPS RTK定位 (手机,无人车定位,无人驾驶,因子图优化)...
- VS|Qt工作笔记-修改pro文件生成目录清晰的项目结构并添加三方库
- win10安装时,提示“我们无法创建新的分区,也找不到现有分区”
- python反归一化_pytorch 归一化与反归一化实例
- 线程动画屏保小球碰撞c语言,线程小动画之屏保--模仿小球碰撞反弹(一)
- 微信小程序调出选择好友聊天窗口
- NVIDIA显卡驱动安装方法
- [007]爬虫系列 | RPC调用简单示例
- 【Android】手撸抖音小游戏潜艇大挑战
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- 如何写好科研论文2021期末考试答案
- abaqus6.10离线版user‘smanual
- 利用Lambda表达式从实体集合中筛选出符合条件的实体集合
- Tampermonkey扩展下载
- 什么是图论和图论在数字图像中的应用
热门文章
- 利用动态规划(DP)解决 Coin Change 问题
- LeetCode 1702. 修改后的最大二进制字符串(贪心)
- LeetCode 1694. 重新格式化电话号码(模拟)
- 天池 在线编程 最大得分(DP)
- LeetCode 第 207 场周赛(245/4115,前5.95%)
- LeetCode 270. 最接近的二叉搜索树值
- LeetCode 167. 两数之和 II - 输入有序数组(双指针)
- Java实验方法参数传递与递归_4.3类的结构之二:方法(return,重载,可变个数形参,值传递,递归)...
- java基础之设计模式
- 动态规划 - Floyd算法求最短路径 - (Matlab建模)