欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现多物体运动的方法详解

程序员文章站 2022-04-29 12:17:13
本文实例分析了js实现多物体运动的方法。分享给大家供大家参考,具体如下: 基本步骤 1.通过getelementsbytagname获取到要做多物体运动的元素 2.然...

本文实例分析了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就卡到半路了。

JS实现多物体运动的方法详解

解决这个问题:让每个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>

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。