JS to achieve horizontal and vertical movement animation

Time:2021-4-19

This example for you to share the JS horizontal and vertical movement of the specific code, for your reference, the specific content is as follows

Horizontal movement analysis:

It can be seen as the change of the left margin of an object.

For example, if you move to the right, the left margin becomes larger and larger (the value is positive), you can adjust the left margin of the object

Moving to the left is that the left margin is getting smaller and smaller (the value is negative), which can be achieved by adjusting the left margin of the object

The actual code is as follows:

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  < button > right < / button > right
  < button > left < / button > left
  <div></div>
  <script>
    var box=document.getElementById('box');
    //Speed
    var index=10;
    //Timer number
    var b;
    //Add right click event
    document.getElementById('btn').onclick=function(){
      Clearinterval (b); // clear the events executed by the previous timer
      B = setinterval (getmove, 100, index); // the getmove function is executed every 100 ms
    }
    //Add left click event
    document.getElementById('btn1').onclick=function(){
      Clearinterval (b); // clear the events executed by the previous timer
      B = setinterval (getmove, 100, - index); // the getmove function is executed every 100 ms
    }
    //Box mobile location
    function getMove(index){
      //Get the left distance of the box
      var a=window.getComputedStyle(box,null).left;
      A = parseInt (a); // convert to numeric value
      box.style.left=a +Index +'px '// calculates the left distance of the box
    }
  </script>
</body>

Vertical movement analysis:

It can be seen as the top margin change of an object.

For example: the downward movement is that the upper margin becomes larger and larger (the value is positive), which can be realized by adjusting the upper margin of the object

Moving up means that the upper margin is getting smaller and smaller (the value is negative), which can be achieved by adjusting the upper margin of the object

The actual code is as follows:

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  < button > down < / button > down
  < button > up < / button > up
  <div></div>
  <script>
    var box=document.getElementById('box');
    //Speed
    var index=10;
    //Timer number
    var b;
    //Add click down event
    document.getElementById('btn').onclick=function(){
      Clearinterval (b); // clear the events executed by the previous timer
      B = setinterval (getmove, 100, index); // the getmove function is executed every 100 ms
    }
    //Add up click event
    document.getElementById('btn1').onclick=function(){
      Clearinterval (b); // clear the events executed by the previous timer
      B = setinterval (getmove, 100, - index); // the getmove function is executed every 100 ms
    }
    //Box mobile location
    function getMove(index){
      //Get the up distance of the box
      var a=window.getComputedStyle(box,null).top;
      A = parseInt (a); // convert to numeric value
      box.style.top=a +Index +'px '// calculates the up distance of the box
    }
  </script>
</body>

Please leave a message if you have something to add!

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.