Home > Article > Web Front-end > Detailed explanation of the method of realizing multi-object movement in JS

Detailed explanation of the method of realizing multi-object movement in JS

韦小宝Original: 2018-01-24 09:55:491092browse

This article mainly introduces the method of realizing multi-object movement in JS, and analyzes it in detail in the form of examples.javascriptThe principles and related operating techniques of realizing multi-object movement. Friends who are interested in JavaScript can Refer to this article

This article analyzes the method of realizing multi-object movement in JS through examples. Share it with everyone for your reference, the details are as follows:

Basic steps

1. Get what to do through getElementsByTagName Multi-object moving elements
2. Then the for loop traverses the elements and adds events
3. Define the startMove function, which requires two parameters, the current "moving" 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>

Problem:

When moving in When the removal speed is relatively fast, it will appear that some li cannot return to its original state and is stuck halfway; This is because all li share a timer;

When the mouse moves into the first li, call startMove 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. The timer will be cleared first, and at this time the first li will be stuck halfway.

Solve this problem: Let each li have its own timer to control their changes, and define it for each li during the for loop One of your own timer

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

Then the timer used every 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:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

Add dot style:

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

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>

Then 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>

The above is all the content of this article. I hope it can help everyone learn JavaScript! !

Related recommendations:

JavaScript implementation of adding and deleting elements to the select drop-down box example sharing

javascript algorithm binary search tree Sample code

Talk about the longest common subsequence in JavaScript

The above is the detailed content of Detailed explanation of the method of realizing multi-object movement in JS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement JS motion to change the transparency of a single objectNext article：How to implement JS motion to change the transparency of a single object

See more

Detailed explanation of the method of realizing multi-object movement in JS

Related articles