今回はJSで折り畳む・展開するアニメーションを作るための注意点をお送りします。実際の事例をいくつか紹介します。
<!DOCTYPE = html> <html> <head> <title> JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:relative; left:-200px; top:0px; } .blue{ background:blue; width:20px; height:50px; position:absolute; left:200px; top:75px; } </style> </head> <body> <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p> <script> window.onload = function(){ var onp = document.getElementById("cf1"); onp.onmouseover = function(){ startmove(0); } onp.onmouseout = function(){ startmove(-200); } } var timer ; function startmove(target){ clearInterval(timer);//清除定时器,以免多次触发定时器导致速度越来越快而不是匀速前进 var onp1 = document.getElementById("cf1"); timer = setInterval(function(){ var speed = 0; if(onp1.offsetLeft<target){ speed = 10; }else{ speed = -10; } if(onp1.offsetLeft==target){ clearInterval(timer); } else{ onp1.style.left = onp1.offsetLeft+speed+'px'; } },30) } </script> </body> </html>
概要:
1. CSS 部分:
1. CSS ファイルの参照メソッドを確認します。
絶対位置
と相対位置関係(親関係はrelativeを使用、子関係はabsoluteを使用)を確認します
1,
element.style.left& element.offsetLeft 違い: ① 前者の単位は文字列である px ですが、後者の単位は数値です。
2マウスの移動は抽象化できません - ターゲットの位置が異なるだけです
3.
関数パラメータはできるだけ少なくする必要があります(目的が達成できる場合)4. マウスアクションオブジェクトを親 p、そうでないとちらつきが発生します (
onmouseoverが呼び出されたばかりで、ターゲットが削除され、再度 onmouseout が呼び出されます) 5. タイマーのクリアに注意してください (①、移動時の速度が不安定になるのを防ぐため、②、移動を停止します)ターゲットの場所で)
3. その他:Q: Google Chrome はポップアップ ウィンドウのブロックを解除しますか?
A: 設定 - 詳細設定 - プライバシー設定 - コンテンツ設定 - 関連する設定を行うためのポップアップ ウィンドウ。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue+vue-router+vuex 操作権限 v-bind と v-on の使用例の詳細な説明以上がJSで折り畳んだり展開したりするアニメーションを作る(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。