溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細介紹了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('box');
//速度
var index=10;
//定時器編號
var b;
//添加向右點擊事件
document.getElementById('btn').onclick=function(){
clearInterval(b);//清除上一個定時器執行的事件
b=setInterval(getMove,100,index);//每100毫秒執行一次getMove函數
}
//添加向左點擊事件
document.getElementById('btn1').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+'px'//計算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('box');
//速度
var index=10;
//定時器編號
var b;
//添加向下點擊事件
document.getElementById('btn').onclick=function(){
clearInterval(b);//清除上一個定時器執行的事件
b=setInterval(getMove,100,index);//每100毫秒執行一次getMove函數
}
//添加向上點擊事件
document.getElementById('btn1').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+'px'//計算box的上距離
}
</script>
</body>以上就是js實現水平移動與垂直移動效果的實際代碼的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
