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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
JS原生带缩略图的图片切换效果
Oct 10 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 curl常用的5个经典例子
2017/01/20 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
python实现的简单抽奖系统实例
2015/05/22 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python实现图书借阅系统
2019/02/20 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
企业军训感言
2014/02/08 职场文书
大学军训感言800字
2014/02/27 职场文书
绩效工资实施方案
2014/03/15 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Redis读写分离搭建的完整步骤
2021/09/14 Redis
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js