Example explanation based on js uniform motion

This article mainly brings you an example explanation based on uniform motion (sidebar, fade in and fade out). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

How to make an element (such as p) move in JavaScript?

Set the basic style, and be sure to position p (of course, you can also use margin changes to create movement effects for elements);

<style>
    p {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>

Basic structure:

   <input type="button" value="动起来"/>
   <p id="box"></p>

When we click this button, to make p move, we actually need to make the left value of p continue to change, then p will have a movement effect. We first let the left change, and then let it continue to change

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

Then whenever I click the button, the left value of p will be added to the original value by 10px. Here you can also use the method of obtaining the non-interline style to obtain the value of left plus 10px, which can also achieve the effect.

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

What is the difference between offsetLeft and obtaining the value of non-interline style left?

offsetLeft does not have a px unit, but left has a px unit

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

Now p is clicked to move, we let it continue to move, how to do it? Add a timer

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

When we click the button, p will keep moving to the left. How to make him stop? Stopping definitely requires conditions. For example, if we ask him to stop when he reaches 500px

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

In this way, we can let p stop at 500px. Here if we change the step length 10 to At 7 or 8, you will find that you can’t stop. Why? Because the judgment condition of 500px will be skipped

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. From 497 to 504, it is skipped 500px, so p can’t stop, what should I do? Just modify the judgment condition.

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

Change the condition to >=500 to clear the timer, and also add this code oBox.style.left = 500 + 'px' to force it is stopped at 500px, otherwise p will not stop at 500px, but 504px. There is another problem. If you keep clicking the button while p is moving, you will find that p starts to accelerate, instead of Every time I add 10px, why is this? This is because every time you click a button, a timer is turned on, and every time you click a button, a timer is turned on. In this way, multiple timers will be superimposed, and the speed will also be superimposed, so p starts to accelerate. , then we need to keep it at a speed of 10px, which means not to let the timer overlap. In more popular terms, it means to ensure that a timer is on. What should I do?

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

You only need to clear the previous timer every time you click the button, so as to ensure that a timer is always on. At this point, a most basic uniform motion structure is completed. Then we can encapsulate it into a function

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

After having this function, let’s make a small application.

http://www.jiathis.com/getcode

When you open this website, you will notice that there is a sidebar effect on the right side (share to). This special effect is very popular on the website. Common

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>侧边栏 - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box p {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<p id="box">
  <p>分享到</p>
</p>
</body>
</html>

Another fade effect:

When the mouse is moved up, the transparency becomes 1

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淡入淡出 - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

Related recommendations:

How to use html5 canvas to achieve uniform motion

Use js to specify steps Long implementation of uniform motion in one direction

JS code example to achieve uniform motion_javascript skills

The above is the detailed content of Example explanation based on js uniform motion. For more information, please follow other related articles on the PHP Chinese website!