ホームページ > 記事 > ウェブフロントエンド > jsスライドアニメーション効果の例の共有
jsスライドアニメーション効果の例の共有
- 小云云オリジナル
- 2018-03-14 17:30:272377ブラウズ
この記事では主に js のスライド アニメーション効果の例を紹介します。皆さんが js を使用して簡単なスライド アニメーション効果を作成できるようになることを願っています。
<!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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。