Home >Web Front-end >JS Tutorial >How to use js to achieve horizontal and vertical movement effects

How to use js to achieve horizontal and vertical movement effects

王林forward: 2020-04-08 09:20:473359browse

Horizontal movement analysis:

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

For example: moving to the right will make the left margin larger and larger (the value is positive), and the left margin of the object can be adjusted to achieve

Moving to the left will make the left margin smaller and smaller (the value is positive) is negative), the left margin of the object can be adjusted to achieve

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 id="btn">向右</button>
  <button id="btn1">向左</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById(&#39;box&#39;);
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向右点击事件
    document.getElementById(&#39;btn&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向左点击事件
    document.getElementById(&#39;btn1&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的左距离
      var a=window.getComputedStyle(box,null).left;
      a=parseInt(a);//转换为数值
      box.style.left=a+index+&#39;px&#39;//计算box的左距离
    }
  </script>
</body>

Vertical movement analysis:

can be regarded as a change in the top margin of an object.

For example: when moving downward, the top margin becomes larger and larger (the value is positive), and the upper margin of the object can be adjusted to achieve

Moving upward means the top margin becomes smaller and smaller (the value is positive) Negative), the upper margin of the object can be adjusted to achieve

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 id="btn">向下</button>
  <button id="btn1">向上</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById(&#39;box&#39;);
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向下点击事件
    document.getElementById(&#39;btn&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向上点击事件
    document.getElementById(&#39;btn1&#39;).onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的上距离
      var a=window.getComputedStyle(box,null).top;
      a=parseInt(a);//转换为数值
      box.style.top=a+index+&#39;px&#39;//计算box的上距离
    }
  </script>
</body>

Recommended related tutorials: js tutorial

The above is the detailed content of How to use js to achieve horizontal and vertical movement effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Use js to imitate the 360 boot effectNext article：Use js to imitate the 360 boot effect

See more

How to use js to achieve horizontal and vertical movement effects

Related articles