如何利用js實現水平移動與垂直移動效果-js教程-PHP中文網

如何利用js實現水平移動與垂直移動效果

王林

發布： 2020-04-08 09:20:47

轉載

3291 人瀏覽過

如何利用js實現水平移動與垂直移動效果

水平移動分析：

可看成是物體的左邊距變化。

例如：向右移動是左邊距越來越大（數值為正），可調整物體的左邊距來實現

向左移動是左邊距越來越小（數值為負），可調整物體的左邊距來實現

實際程式碼如下：

<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>

登入後複製

#垂直移動分析：

可看成是一個物體的上邊距變化。

例如：向下移動是上邊距越來越大（數值為正），可調整物體的上邊距來實現

向上移動是上邊距越來越小（數值為負），可調整物件的上邊距來實現

實際程式碼如下：

<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>

登入後複製

相關教學建議：js教學

以上是如何利用js實現水平移動與垂直移動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！