Home > Article > Web Front-end > Sharing examples of multi-object movement using JS

Sharing examples of multi-object movement using JS

小云云Original: 2018-01-24 09:02:111324browse

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 it. I hope it can help everyone.

Basic steps

1. Get the elements to be moved by multiple objects through getElementsByTagName
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

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 transfer speed is relatively fast, it will It appears that some li cannot return to its original state and is stuck halfway; This is because all li's share a timer;

When the mouse moves into the first li , call startMove to start a timer; when the mouse removes li, you also need to start a timer to let li return to its original position. When li reaches halfway, we move into the second li. The timer will be cleared first. At this time, the second li will be cleared. One 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 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>

Related recommendations:

Javascript multi-object motion implementation method analysis_javascript skills

Explanation of examples of uniform motion based on js

Two JS implementations Method of ball parabolic trajectory movement

The above is the detailed content of Sharing examples of multi-object movement using 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：Detailed explanation of the usage of jQuery Ajax (load, post, get, ajax)Next article：Detailed explanation of the usage of jQuery Ajax (load, post, get, ajax)

See more

Sharing examples of multi-object movement using JS

Related articles