声明:

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实现重力弹跳拖拽运动效果相关推荐

  1. react实现的点击拖拽元素效果

    之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...

  2. 贝塞尔曲线(Bezier)之 QQ 消息拖拽动画效果

    博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此   博主:威威喵  |  博客主页:https://blog.csdn.net/ ...

  3. android qq消息数 拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现

    好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...

  4. 利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

    1 实现效果 对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势 ...

  5. android开发之仿QQ拖拽界面效果(侧滑面板)

    仿QQ拖拽界面效果(侧滑面板),我们一般继承Layout,不会直接去继承ViewGroup,而是继承FrameLayout,为什么五大布局我们偏偏只继承FrameLayout呢? 第一,FrameLa ...

  6. Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例

    效果图: 一.实现思路 在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效 ...

  7. BHO,C#实现了超级拖拽的效果

    BHO,C#实现了超级拖拽的效果. 分类: C# 2013-12-10 22:49 167人阅读 评论(0) 收藏 举报 BHO 我一般习惯用IE,以前一直是搭配着IEPRO用的,主要用里面的鼠标手势 ...

  8. ToolStrip控件左右拖拽移动效果实现

    1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位. 2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1 ...

  9. 突袭HTML5之Javascript API扩展4 - 拖拽

    拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域. 很多javascript都类似实现了相关的功能,例如,jQueryUI的drag and drop组件.在 ...

最新文章

  1. 报名 | 大数据如何提升保险客户体验思享会
  2. caffe的prototxt文件
  3. ionic移动开发流程api
  4. Objective-C中class、Category、Block的介绍
  5. db2嵌套查询效率_db2性能优化
  6. gnss单频软件接收机应用与编程_GNSS/GPS RTK定位 (手机,无人车定位,无人驾驶,因子图优化)...
  7. VS|Qt工作笔记-修改pro文件生成目录清晰的项目结构并添加三方库
  8. win10安装时,提示“我们无法创建新的分区,也找不到现有分区”
  9. python反归一化_pytorch 归一化与反归一化实例
  10. 线程动画屏保小球碰撞c语言,线程小动画之屏保--模仿小球碰撞反弹(一)
  11. 微信小程序调出选择好友聊天窗口
  12. NVIDIA显卡驱动安装方法
  13. [007]爬虫系列 | RPC调用简单示例
  14. 【Android】手撸抖音小游戏潜艇大挑战
  15. ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
  16. 如何写好科研论文2021期末考试答案
  17. abaqus6.10离线版user‘smanual
  18. 利用Lambda表达式从实体集合中筛选出符合条件的实体集合
  19. Tampermonkey扩展下载
  20. 什么是图论和图论在数字图像中的应用

热门文章

  1. 利用动态规划(DP)解决 Coin Change 问题
  2. LeetCode 1702. 修改后的最大二进制字符串(贪心)
  3. LeetCode 1694. 重新格式化电话号码(模拟)
  4. 天池 在线编程 最大得分(DP)
  5. LeetCode 第 207 场周赛(245/4115,前5.95%)
  6. LeetCode 270. 最接近的二叉搜索树值
  7. LeetCode 167. 两数之和 II - 输入有序数组(双指针)
  8. Java实验方法参数传递与递归_4.3类的结构之二:方法(return,重载,可变个数形参,值传递,递归)...
  9. java基础之设计模式
  10. 动态规划 - Floyd算法求最短路径 - (Matlab建模)