How to use js to achieve horizontal and vertical movement effects-JS Tutorial-php.cn

How to use js to achieve horizontal and vertical movement effects

王林

Release： 2020-04-08 09:20:47

forward

3292 people have browsed it

How to use js to achieve horizontal and vertical movement effects

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>

Copy after login

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>

Copy after login

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!