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

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

成都創(chuàng)新互聯(lián)公司于2013年開始，先為營口等服務(wù)建站，營口等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為營口企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

水平移動分析：

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

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

向左移動是左邊距越來越?。〝?shù)值為負），可調(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ù)值為負），可調(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>

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

分享標題：js實現(xiàn)水平移動與垂直移動效果的實際代碼
路徑分享：http://bm7419.com/article2/jjesic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)、App設(shè)計、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容