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

网络编程 发布日期：2024/9/28 浏览次数：1

正在浏览：JS实现多物体运动的方法详解

本文实例分析了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 "font-size: medium">问题：


当移入移出速度比较快的时候，就会出现有的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 "htmlcode">



<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 "_blank" href="https://www.jb51.net/Special/418.htm">JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》


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


        

        

            
上一篇：简述vue中的config配置

            
下一篇：JS运动改变单物体透明度的方法分析

        

        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。