JavaScript拖拽、碰撞、重力及弹性运动实例分析


Posted in Javascript onJanuary 08, 2016

本文实例讲述了JavaScript拖拽、碰撞、重力及弹性运动实现方法。分享给大家供大家参考,具体如下:

js拖拽、碰撞与重力实现代码:

window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 var lastX=0;
 var lastY=0;
 oDiv.onmousedown=function (ev)
 {
 var oEvent=ev||event;
 var disX=oEvent.clientX-oDiv.offsetLeft;
 var disY=oEvent.clientY-oDiv.offsetTop;
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-disX;
  var t=oEvent.clientY-disY;
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
  iSpeedX=l-lastX;
  iSpeedY=t-lastY;
  lastX=l;
  lastY=t;
  document.title='x:'+iSpeedX+', y:'+iSpeedY;
 };
 document.onmouseup=function ()
 {
  document.onmousemove=null;
  document.onmouseup=null;
  startMove();
 };
 clearInterval(timer);
 };
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
function startMove()
{
 clearInterval(timer);
 timer=setInterval(function (){
 var oDiv=document.getElementById('div1');
 iSpeedY+=3;
 var l=oDiv.offsetLeft+iSpeedX;
 var t=oDiv.offsetTop+iSpeedY;
 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  iSpeedY*=-0.8;
  iSpeedX*=0.8;
  t=document.documentElement.clientHeight-oDiv.offsetHeight;
 }
 else if(t<=0)
 {
  iSpeedY*=-1;
  iSpeedX*=0.8;
  t=0;
 }
 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
 {
  iSpeedX*=-0.8;
  l=document.documentElement.clientWidth-oDiv.offsetWidth;
 }
 else if(l<=0)
 {
  iSpeedX*=-0.8;
  l=0;
 }
 if(Math.abs(iSpeedX)<1)
 {
  iSpeedX=0;
 }
 if(Math.abs(iSpeedY)<1)
 {
  iSpeedY=0;
 }
 if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  clearInterval(timer);
  alert('停止');
 }
 else
 {
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
 }
 document.title=iSpeedX;
 }, 30);
}

js弹性运动实现代码:

var left=0; //用left变量存储赋给obj.style.left的值,以防每次系统都省略小数,所导致最后结果的细微差异
var iSpeed=0;
function startMove(obj,iTarget)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5; //速度
  iSpeed*=0.7; //考虑阻力
  left+=iSpeed;
  if(Math.abs(iSpeed)<1&&Math.abs(iTarget-obj.offsetLeft)<1) //停止条件 速度和距离绝对值小于1
  {
   clearInterval(obj.timer);
   obj.style.left=iTarget+"px"; //清楚后,顺便把目标值赋给obj.style.left
  } 
  else
  {
   obj.style.left=left+"px";
  }
 },30);
}

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
You might like
PHP与MySQL交互使用详解
2006/10/09 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php实现文件下载实例分享
2014/06/02 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
十八大报告观后感
2014/01/28 职场文书
指导教师评语
2014/04/26 职场文书
财务部绩效考核方案
2014/05/04 职场文书
给校长的建议书500字
2014/05/15 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android