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

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-04-08
这篇文章主要介绍了JavaScript拖拽、碰撞、重力及弹性运动实现方法,涉及JavaScript数学运算结合时间函数实现运动效果的相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • asp.net及javascript判断是否手机访问的方法
    这篇文章主要介绍了asp.net及javascript判断是否手机访问的方法,结合实例形式对比分析了asp.net及javascript实现判断访问端类型的相关技巧,需要的朋友可以参考下本文实例讲述了asp.net及javascript判断是否手机访问的方法.分享给大家供大家参考,具体如下: /// <summary> /// 判断手机用户Use ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
  • BootStrap使用popover插件实现鼠标经过显示并保持显示框
    BootStrap使用popover插件实现鼠标经过显示并保持显示框
    这篇文章主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: < ...
  • 正则表达式单行、多行模式简介(使用说明)
    正则表达式单行、多行模式简介(使用说明)
    我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数继上几篇正则表达式相关说明(详情:正则表达式 ),我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数.目前常用正则表达式都有该使用选项,如:javascript 正则表达 ...
  • 正则表达式性能优化方法高效正则表达式书写
    正则表达式性能优化方法高效正则表达式书写
    这里说的正则表达式优化,主要是针对目前常用的NFA模式正则表达式这里说的正则表达式优化,主要是针对目前常用的NFA模式正则表达式,详细可以参考:正则表达式匹配解析过程探讨分析(正则表达式匹配原理).从上面例子,我们可以推断出,影响NFA类正则表达式(常见语言:GNU Emacs,Java,ergp,less,more,.NET语言, PCRE library ...
猜你喜欢