How to implement multi-object motion in JS-JS Tutorial-php.cn

How to implement multi-object motion in JS

php中世界最好的语言

Release： 2018-04-13 10:52:39

Original

1409 people have browsed it

This time I will bring you the implementation method of JS multi-object movement. What are the precautions for the implementation of JS multi-object movement. The following is a practical case, let's take a look.

The basic steps

1. Obtain the elements to be moved by multiple objects through getElementsByTagName
2. Then traverse the elements in a for loop and add events
3. Define the startMove function, which requires two parameters. Currently "doing movement" " element, and the target value target

Attention: In multi-object motion, everything cannot be shared;

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      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+&#39;px&#39;;
        }
      },30);
    }
</script>

Copy after login

question:

When the moving in and out speed is relatively fast, some li will not be able to return to its original state and will get stuck in the middle; This is because all li's share a timer;

When the mouse moves into the first li, startMove is called to start a timer; when the mouse removes the li, a timer also needs to be started to return the li to its original position. When the li reaches halfway, we move into the second li. First The timer will be cleared, and at this time the first li will be stuck halfway.

How to implement multi-object motion in JS

Solve this problem: Let each li have its own timer to control their changes. During the for loop, define its own timer for each li

liTags[i].timer = null;// 给每个li都添加一个timer

Copy after login

Then, the timer used each time in starMove is the current li's own, so there will be no interference with each other.

The previous timer here has been changed to obj.timer (the current object’s own timer); there is no problem here.

The complete code is as follows:

Copy after login

Add dot style:

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

Copy after login

Complete js code

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      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+&#39;px&#39;;
        }
      },30);
    }
</script>

Copy after login

Next, let’s look at an example: Multi-object movement - changing transparency

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    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 = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!