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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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 删除cookie和浏览器重定向
2009/03/16 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
页面中js执行顺序
2009/11/09 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
如何在python中写hive脚本
2019/11/08 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
python中remove函数的踩坑记录
2021/01/04 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
交通事故被告答辩状
2015/05/22 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js