JS實現(xiàn)水平移動與垂直移動動畫

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

本文實例為大家分享了JS實現(xiàn)水平移動與垂直移動的具體代碼，供大家參考，具體內(nèi)容如下

水平移動分析：

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

比如：向右移動是左邊距越來越大（數(shù)值為正），可調(diào)整物體的左邊距來實現(xiàn)

向左移動是左邊距越來越?。〝?shù)值為負(fù)），可調(diào)整物體的左邊距來實現(xiàn)

實際代碼如下：

<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('box');
    //速度
    var index=10;
    //定時器編號
    var b;
    //添加向右點擊事件
    document.getElementById('btn').onclick=function(){
      clearInterval(b);//清除上一個定時器執(zhí)行的事件
      b=setInterval(getMove,100,index);//每100毫秒執(zhí)行一次getMove函數(shù)
    }
    //添加向左點擊事件
    document.getElementById('btn1').onclick=function(){
      clearInterval(b);//清除上一個定時器執(zhí)行的事件
      b=setInterval(getMove,100,-index);//每100毫秒執(zhí)行一次getMove函數(shù)
    }
    //box移動位置
    function getMove(index){
      //獲取box的左距離
      var a=window.getComputedStyle(box,null).left;
      a=parseInt(a);//轉(zhuǎn)換為數(shù)值
      box.style.left=a+index+'px'//計算box的左距離
    }
  </script>
</body>

垂直移動分析：

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

比如：向下移動是上邊距越來越大（數(shù)值為正），可調(diào)整物體的上邊距來實現(xiàn)

向上移動是上邊距越來越?。〝?shù)值為負(fù)），可調(diào)整物體的上邊距來實現(xiàn)

實際代碼如下：

<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('box');
    //速度
    var index=10;
    //定時器編號
    var b;
    //添加向下點擊事件
    document.getElementById('btn').onclick=function(){
      clearInterval(b);//清除上一個定時器執(zhí)行的事件
      b=setInterval(getMove,100,index);//每100毫秒執(zhí)行一次getMove函數(shù)
    }
    //添加向上點擊事件
    document.getElementById('btn1').onclick=function(){
      clearInterval(b);//清除上一個定時器執(zhí)行的事件
      b=setInterval(getMove,100,-index);//每100毫秒執(zhí)行一次getMove函數(shù)
    }
    //box移動位置
    function getMove(index){
      //獲取box的上距離
      var a=window.getComputedStyle(box,null).top;
      a=parseInt(a);//轉(zhuǎn)換為數(shù)值
      box.style.top=a+index+'px'//計算box的上距離
    }
  </script>
</body>

有補充得請留言！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：使用JavaScript計算前一天和后一天的思路詳解

欄目：JavaScript

下一篇：js正則匹配多個全部數(shù)據(jù)問題

本文標(biāo)題：JS實現(xiàn)水平移動與垂直移動動畫

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9448.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

JS實現(xiàn)水平移動與垂直移動動畫

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀