Home > Article > Web Front-end > How to implement multi-object movement in JS (detailed tutorial)

How to implement multi-object movement in JS (detailed tutorial)

亚连Original: 2018-06-09 17:32:561387browse

This article mainly introduces the method of JS to realize multi-object movement. It analyzes the principles and related operation techniques of JavaScript to realize multi-object movement in detail in the form of examples. Friends in need can refer to this article

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

Basic steps

1. Get the elements for multi-object movement through getElementsByTagName
2. Then the for loop traverses the elements and adds events
3. Define the startMove function, which requires two parameters, the current "doing exercise" element, and the target value target

Note: 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 the moving in and out speed is relatively fast , it will appear that some li cannot return to its original state and is stuck in the middle; This is because all li share a timer;

When the mouse moves into the first When a li is reached, 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, and the timer will be cleared first. At this time, the first li got 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 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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

What are the methods to add new properties of objects to the detection sequence in vue?

How to achieve the animation effect of bouncing off the edge in jQuery?

How to use sass in vue cli webpack (detailed tutorial)

How to change the P tag text value in jQuery

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

Implement the method of adding and assigning tag sub-elements in jQuery

How to implement the commonly used message box in JS?

The above is the detailed content of How to implement multi-object movement in JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery sass webpack for 循环 JS 对象事件 li

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 configure config in vue (detailed tutorial)Next article：How to configure config in vue (detailed tutorial)

See more

How to implement multi-object movement in JS (detailed tutorial)

Related articles