JavaScript运动知识

来源：互联网发布：卧式加工中心编程方法编辑：程序博客网时间：2024/06/11 07:08

JavaScript一、运动基础关于JavaScript的运动，我们可以通过一个小小的div的运动来说明步骤：1、样式要设置为绝对定位2、添加定时器3、使div.style.left = div.offsetLeft+speed+”px”;<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}</style><script>window.onload = function(){ var timer = null; var speed = 7;var oBtn = document.getElementById("btn");var oDiv = document.getElementById("div1");oBtn.onclick = function(){ timer = setInterval(function(){if(oDiv.offsetLeft >= 300){clearInterval(timer);}      oDiv.style.left = oDiv.offsetLeft+speed+"px"; },100);}}</script></head><body><input id = "btn" type = "button" value = "开始"/><div id = "div1"></div></body></html>需要注意的几个问题：1、停在指定位置：判断div.offsetLeft 2、有时到达指定位置不停止：因为speed可能刚好跳过判断条件。如：speed=7，指定位置是100，但是div.offsetLeft 不会等于100,这样使得物体互惠停止。解决方案：判断条件改为：div.offsetLeft>=指定位置3、到达指定位置后再点击按钮还是可以运动：因为onclick事件至少会执行一次。解决方案：使用if/else语句4、重复点击按钮div会加速：因为之前的定时器还在工作，点击按钮会再开启新的定时器。即：开启了多个定时器。解决方案：在每次执行onclick事件函数执行时都要clearInterval(timer)，保证只有一个定时器;代码修改如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}</style><script>window.onload = function(){ var timer = null; var speed = 7;var oBtn = document.getElementById("btn");var oDiv = document.getElementById("div1");oBtn.onclick = function(){clearInterval(timer);timer = setInterval(function(){if(oDiv.offsetLeft >= 300){clearInterval(timer);}else{     oDiv.style.left = oDiv.offsetLeft+speed+"px";}},100);}}</script></head><body><input id = "btn" type = "button" value = "开始"/><div id = "div1"></div></body></html>注意！这是个匀速运动二、缓冲运动上面小小的例子是匀速运动，相对于匀速运动，缓冲运动是变速运动！缓冲运动的特点：距离大，速度大 ；距离小，速度小 。速度由距离决定。速度、距离成正比速度 = （目标值-当前值）/缩放系数（当然，速度也可以由其他决定，这不过是一种思路，不过大多数运用这个就可以了）<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>#div1{width:100px;height:100px;background: red;position:absolute;left:0px;top:50px}#div2{width:1px;height:500px;background: blue;position:absolute;left:300px;top:50px}</style><script>window.onload = function(){var oDiv = document.getElementById("div1");var oBtn1 = document.getElementById("btn1");var oBtn2 = document.getElementById("btn2");oBtn1.onclick = function(){startMove(300);}oBtn2.onclick = function(){startMove(0);}}var timer = null; function startMove(iTarget){var oDiv = document.getElementById("div1");clearInterval(timer);timer = setInterval(function(){document.title = oDiv.offsetLeft;  var speed = (iTarget-oDiv.offsetLeft)/10;    if(oDiv.style.left ==iTarget){ clearInterval(timer);  }else{ oDiv.style.left = oDiv.offsetLeft + speed + "px"; }}) }</script></head><body><input id = "btn1" type = "button" value = "开始"/><input id = "btn2" type = "button" value = "回退"/><div id = "div1"></div><div id = "div2"></div></body></html>注意：1、div并不能真正停在指定位置。因为当速度不足整数时，即随着div的运动，speed会越来越小。当speed = (300-obj.offsetLeft)/10--->后面出现小数——》如：0.9，会默认为speed=0， 停止运动。如下图：标题上的是oDiv.offsetLeft = 296，而不是300

<img src="http://img.blog.csdn.net/20160812221345390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 解决方案：Math.ceil(数)  向上取整 如：0.9——》1    向右运动  speed = Math.ceil(speed)Math.floor(数)   向下取整如：-0.9——》-1 向左运动(负数)  speed = Math.floor(speed)2、可以运用   ？：  来代替if做判断speed = (iTarget-oDiv.offsetLeft)/1；speed = (iTarget-oDiv.offsetLeft)>0? Math.ceil(speed): Math.floor(speed);修改startMove函数为：function startMove(iTarget){var oDiv = document.getElementById("div1");clearInterval(timer);timer = setInterval(function(){document.title = oDiv.offsetLeft;speed = (iTarget-oDiv.offsetLeft)/10;speed = (iTarget-oDiv.offsetLeft)>0? Math.ceil(speed): Math.floor(speed);/* if(oDiv.offsetLeft<iTarget){var speed = (iTarget-oDiv.offsetLeft)/10; speed = Math.ceil(speed); }else{ var speed = (iTarget-oDiv.offsetLeft)/10; speed = Math.floor(speed);} */ if(oDiv.style.left ==iTarget){ clearInterval(timer);  }else{ oDiv.style.left = oDiv.offsetLeft + speed + "px"; }}) }修改后的图片：

<img src="http://img.blog.csdn.net/20160812221410647?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 三、多物体的运动<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>div{width:100px;height:50px;background: blue;margin: 10px;}#div1{filter:alpha(opacity:40);opacity:0.4}</style><script>alert(0.07*100);window.onload = function(){var aDiv = document.getElementsByTagName("div"); for(var i =0;i<aDiv.length;i++){ aDiv[i].onmouseover = function(){startMove(this,400);  }aDiv[i].onmouseout = function(){startMove(this,80); } }}  var timer = null;function startMove(object,iTarget){clearInterval(timer); object.timer = setInterval(function(){ var speed = (iTarget-object.offsetWidth)/5;speed = speed>0?Math.ceil(speed):Math.floor(speed);  if(object.offsetWidth == iTarget){clearInterval(timer);}else{object.style.width = object.offsetWidth + speed + "px"; }},30)}     function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; }    } </script></head><body><div></div><div></div><div> </div><div></div></body></html>

运行后的图片 ！！！所有物体不能共用，不然会有冲突，div还没恢复原状，定时器就被关闭

<img src="http://img.blog.csdn.net/20160812221643619?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />属性与运动对象绑定：速度、其他属性

让每个div都有自己的定时器！！，在for循环时：aDiv[i].timer = null;   之后在函数中引用时：object.timer

0 0