一緒に改善するために多くのプラグインが利用できますが、JavaScriptの実用的なシリーズの一連の例を作成し、あなたと共有しました。良い提案がある場合は、子供を誤解させないように、必ず指摘してください！
今日は最初の戦いです。コレクションとリリースアニメーション効果を備えたメニュー、効果は次のとおりです。（スタイルは少し醜い（ - ^ - ））
（この記事を書いていたときにさまざまな編集者を使用したため、当面はデモ効果を追加することはできません。ここにあります：最終的な完全なコードとデモンストレーション）
アニメーション効果：マウスホバーは、すべてのターゲットの背景とフォントの色を変更し、マウスを「ホームページナビゲーション」に移動し、以下のグループ化メニューを表示します。グループ化メニューにはサブメニューがあります。クリックしてズームします。これにより、アニメーション効果が過剰になります！さらに、効果に影響を与えることなく、ナビゲーションメニューとサブメニューを自由に追加および削除することができます！
それを達成する方法は？
ステップ1：メニューを実装するために何を使用しますか？ HTMLコードは、JSコードとHTMLコードの分離の原則に従って、次のように設計されています！ここにはJSコードが表示されません
これは、スタイルが適用される前のように見えたものでした。それは非常に古いものでした！ ！ ！
ステップ2： CSSスタイル。マウスホバーは、すべてのターゲットのバックグラウンドとフォントの色を変更し、CSSトランジションと：ホバーを直接使用します。ただし、他のすべてのCSSスタイルのレイアウトをリストするわけではありません。自分でやりましょう。次の点に注意してください。
#ul {.... z-index：100; } #ul li {display：inline-block;位置：相対;上：0;左：-25px;幅：10％;最小幅：70px;高さ：30px;テキストアライグ：センター; Line-Height：30px;ボーダー：1pxソリッドグレー;ボーダーラジウス：10px;背景色：AliceBlue;カーソル：ポインター; -webkit-transition：すべてが0.3秒の容易さ。 -moz-transition：すべての容易さ0.3秒。 -ms-transition：すべての容易さ0.3秒; -O-Transition：すべての容易さ0.3秒;遷移：すべての容易さ0.3秒。 } #ul li：hover {background-color：aquamarine; color：red;} ... .show-hide：hover {background-color：beige} .a-div {background-color：aquamarine;ボーダーラジウス：10px;色：黒;表示：なし;不透明：0} .a {z -index：-1;表示：ブロック; ...}ステップ3：このステップが重要なポイントです。各メニューオプションを聞いてグループ化を聴くイベントを追加する場合、個人的には多くのトラブルであり、コードの量が多かれ少なかれあると思います。それを達成するために要素に監視を追加する方法はありますか？
イベントの泡立ちメカニズムを使用して、答えがなければなりません！親要素ULタグにイベントリスニングを追加し、リスニング関数のトリガーイベントの要素スタイルを直接変更すると、それは簡単です！
コードは次のとおりです。
var ul = document.getElementById（ 'ul'）; ul.addeventlistener（ 'mouseover'、listerer1、false）; ul.addeventlistener（ 'mouseout'、listerer2、false）; ul.addeventlistener（ 'click'、listener3、false）;
IE8以下のバージョンにはaddEventListenerがないため、互換性がある場合は、対応するAttachEventのコードを追加する必要があります。
ステップ4 ：主人公が現れます！ listener1、listener2、ristener3リスニング関数を実装します。
まず、最もシンプルなlisterer1関数を考えてみましょう。コードは次のとおりです。
functionリスナー1（event）{// event = event || window.event; // IE8および以前のバージョンと互換性のあるvar target = event.target || event.srcelement; // IE8と以前のバージョンと互換性があるif（ターゲット.tagname.tolowercase（）=== 'li'）{var div1 =ターゲット.getelementsbytagname（ 'div'）[0]; div1.style.display = 'block'; var i = 0; var id; （function foo（）{if（i> = 1）{cleartimeout（id）; id = null;} i+= 0.2; div1.style.opacity = i; id = setimeout（function（）{cleartimeout（）; foo（）}、30）;}）（）; }}繰り返しますが、すべてがIE8以降のバージョン用です。
1.そのイベントにはターゲット属性がないため、対応するsrcelement属性のみが
2。そして、この文イベント= event || window.event;ここでは実際に省略できます。属性を使用して登録イベントリスニングを設定する場合のみ、ul.onmouseover = function（）{}、または<ul onmouseover = 'func'>、ie8および古いバージョンは、window.eventを介して現在のイベントオブジェクトのみを取得できます。
わかりました、今、あなたは現在のトリガーイベントのターゲットを取得したので、物事ははるかにシンプルです。
以下は、マウスアウトが主にターゲットチャイルドエレメントDivを操作するときにトリガーされるリスナー2関数です。コードは次のとおりです。
functionリスナー2（event）{// event = event || window.event; var target = event.target || event.srcelement; if（target.tagname.tolowercase（）=== 'li'）{var div1 = target.getElementsByTagname（ 'div'）[0]; div1.onmouseover = function（）{div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function（）{div1.style.display = 'none'; div1.style.opacity = 0; }; div1.style.display = 'none'; //このグループは、マウスが上から外出するときにdiv1を非表示にすることですdiv1.style.opacity = 0; }}さて、今ではほとんどの効果が達成されており、最後のステップがあります。つまり、主人公No. 1：Listener3関数があります。
実装の原則：
1.関数の外側のブール変数をスイッチとして定義し、マウスをクリックして、もう一度オフをクリックします。
2。SettimeOutを使用してアニメーション効果を実現し、サブメニューの高さと不透明な属性、および表示属性を動的に変更します。
完全なコードは次のとおりです。
var bool = true; functionリスナー3（event）{var event = event || window.event; var target = event.target || event.srcelement; if（target.classname === 'show-hide'）{var parent = target.parentelement; var adiv = parent.getElementsbyclassname（ 'a-div'）[0]; if（window.getComputedStyle（adiv、null）.opacity> 0.5）{bool = false} else {bool = true} var height = 90、changeh、ofacity、id; if（bool）{changeh = 0;不透明= 0; Target.innerhtml = 'Financial-'; （function show（）{if（changeh> height）{cleartimeout（id）; return} changeh += 5; ofacity += 0.06; //console.log('opacity:' +div.style.opacity+',height： ' +adiv.style.height）; adiv.height = heighth +' px adiv.style.display = 'block' = function（）{cleartimeout（）;}、16.7）; bool = false; } else {changeh = height;不透明= 1; Target.innerhtml = 'Financial+'; （function hidden（）{if（changeh <0）{cleartimeout（id）; adiv.style.display = 'none'; return} changeh - = 10; opacity- = 0.11; //console.log('opacity:'+ adiv.style.opacity+'、height = adiv.style.height）; 'px'; bool = true; }}}注意すべきいくつかのポイント：
1. SettimeOutとExitのIDをクリアすることを忘れないでください。そうしないと、Dead Loopはif（changeh <0）{cleartimeout（id）; adiv.style.display = 'none'; return}のようなものです。
2。SettimeOutの遅延時間は16.7に設定されます。なぜなら、画面60fpsのリフレッシュレートを満たしているため、見た目が快適になります
3。デバッグプロセス中、ChangehとOpacityの増分値と減少値を設定するとき、デバッグを容易にするために印刷することを忘れないでください。
console.log（ 'ofacity：'+adiv.style.opacity+'、height：'+adiv.style.height）;
4.最後に、メニュー全体の実装で最も重要なことは、次の文です。この文がなければ、すべての機能を完全に実装することはできません。たとえば、サブメニューのグループをクリックして、他のグループに移動すると、状況は非常に異なります。 Window.getComputedStyleがこれを使用する理由は、初めて開くときにグループをクリックしても応答しないからです。
if（window.getcomputedStyle（adiv、null）.opacity> 0.5）{bool = false} else {bool = true};
ただし、getComputedStyleメソッドはIE9以下ではサポートされておらず、IE要素オブジェクトにはcurrentStyleプロパティがあります。
CSS処理にあまり精通していない場合は、ネイティブJSを使用してCSSスタイルを読み書きする方法の要約をご覧ください。
Settimeout（）メソッドの適用について詳しく知りたい場合は、これをご覧ください。SettimeOutの仕組みを本当に知っていますか
イベント処理メカニズムについては、これを見ることができます：DOMでのイベント処理の概要と、DOMでのイベント処理の原則の包括的な分析
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。