<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS animation</title>
<style>
*{ margin: 0; padding: 0; }
p{ background-color: green; width: 100px; height: 100px; }
</style></head><body><p id="p1"></p><script>
p1.style.position = 'absolute'
p1.style.left = 0
var n = 0
var id = setInterval( ()=> {
n = n + 5
p1.style.left = n + 'px'
if(n>100){
window.clearInterval(id)
}
},1000/24)</script></body></html> 我們知道，由於視覺停留，那些靜態的畫面組合起來才會讓我們有動畫的錯覺。這裡我每秒移動這個小方塊24次，每次移動5px，利用這個錯覺讓它看起來是在緩慢移動。
先對p1的style進行設置，使我們能夠透過left控制它的偏移量。偏移量由n控制，n一直在遞增。
由於動畫需要停止，所以我們透過if判斷在n>100的時候清除名稱為id的interval，讓它不再運作。
相關推薦：
jQuery實作選單感應滑鼠滑動動畫效果的方法_jquery
以上是js滑動動畫效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
