js實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)效果的實(shí)際代碼

發(fā)布時(shí)間：2020-04-08 14:13:36 來源：億速云閱讀：195 作者：小新欄目：web開發(fā)

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)效果的實(shí)際代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

水平移動(dòng)分析：

可看成是一個(gè)物體的左邊距變化。

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

向左移動(dòng)是左邊距越來越小（數(shù)值為負(fù)），可調(diào)整物體的左邊距來實(shí)現(xiàn)

實(shí)際代碼如下：

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

垂直移動(dòng)分析：

可看成是一個(gè)物體的上邊距變化。

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

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

實(shí)際代碼如下：

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

以上就是js實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)效果的實(shí)際代碼的簡(jiǎn)略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道哦！

向AI問一下細(xì)節(jié)

js實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)效果的實(shí)際代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽