<!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> 視覚的な一時停止により、これらの静止画像の組み合わせがアニメーションのような錯覚を与えることはわかっています。ここでは、この小さな正方形を 1 秒あたり 24 回、毎回 5 ピクセルずつ動かし、この錯覚を利用してゆっくりと動いているように見せます。
まず、左からオフセットを制御できるように p1 のスタイルを設定します。オフセットは n によって制御され、n は常に増加します。
アニメーションを停止する必要があるため、if を使用して n>100 になった時点を判断し、id という名前の間隔をクリアして機能しなくなるようにします。
関連する推奨事項:
メニュー依存のマウス スライド アニメーションを実装するための jQuery メソッドeffect_jquery
以上がjsスライドアニメーション効果の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
