这篇文章主要介绍了js实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下
本文实例分析了js实现多物体运动的方法。分享给大家供大家参考，具体如下：
基本步骤
1.通过getelementsbytagname获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startmove函数，需要两个参数，当前“做运动”的元素，和目标值target
注意问题：在多物体运动中，所有的东西不能公用；
<script> window.onload = function(){ var litags = document.getelementsbytagname('li'); // 第一步 for(var i=0;i<litags.length;i++){ // 第二步 litags[i].onmouseover = function () { startmove(this,400); } litags[i].onmouseout = function () { startmove(this,200); } } } var timer = null; function startmove(obj,itarget) { // 第三步，2个参数 clearinterval(timer); timer = setinterval(function () { var ispeed = (itarget - obj.offsetwidth)/10; ispeed = ispeed>0 ?math.ceil(ispeed):math.floor(ispeed);// 缓冲运动注意取整处理 if(obj.offsetwidth == itarget){ clearinterval(timer); }else{ obj.style.width = obj.offsetwidth+ispeed+'px'; } },30); }</script>
问题：
当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；
当鼠标移入第一个li时，调用startmove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。
解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个timer
litags[i].timer = null;// 给每个li都添加一个timer
接着在starmove里面每次用的定时器都是当前li 自己的，就不会互相干扰了。
这里由之前的timer变成了obj.timer (当前对象自己的timer)；到这里就没问题了。
完整代码如下：
<body><ul> <li></li> <li></li> <li></li> <li></li></ul></body>
加点样式：
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; background: lightblue; }</style>
完整js代码
<script> window.onload = function(){ var litags = document.getelementsbytagname('li'); for(var i=0;i<litags.length;i++){ litags[i].timer = null;// 给每个li都添加一个timer litags[i].onmouseover = function () { startmove(this,400); } litags[i].onmouseout = function () { startmove(this,200); } } } function startmove(obj,itarget) { clearinterval(obj.timer); obj.timer = setinterval(function () { var ispeed = (itarget - obj.offsetwidth)/10; ispeed = ispeed>0 ?math.ceil(ispeed):math.floor(ispeed); if(obj.offsetwidth == itarget){ clearinterval(obj.timer); }else{ obj.style.width = obj.offsetwidth+ispeed+'px'; } },30); }</script>
接着在看一个例子：多物体运动-改变透明度
<script> window.onload = function () { var aimgs = document.getelementsbytagname('img'); for(var i=0;i<aimgs.length;i++){ aimgs[i].timer = null; aimgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性 aimgs[i].onmouseover = function () { startmove(this,30); } aimgs[i].onmouseout = function () { startmove(this,100); } } } // var alpha = 100; 这里alpha在多物体运动里 不能公用 function startmove(obj,itarget) { clearinterval(obj.timer); var ispeed = (itarget - obj.alpha)/10; ispeed = ispeed>0 ? math.ceil(ispeed): math.floor(ispeed); obj.timer = setinterval(function(){ if(obj.alpha == itarget){ clearinterval(obj.timer); }else{ obj.alpha += ispeed; obj.style.opacity =obj.alpha/100; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; } },30); }</script>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中将对象新增的属性添加到检测序列的方法有哪些？
在jquery中实现碰到边缘反弹的动画效果该如何做？
在vue cli webpack中如何使用sass（详细教程）
在jquery中如何改变p标签文本值
通过在js动态中创建标签,并设置属性方法（详细教程）
在jquery中实现标签子元素的添加和赋值方法
在js中常用的消息框如何实现？
以上就是在js中如何实现多物体运动（详细教程）的详细内容。