一緒に改善するために多くのプラグインが利用できますが、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をもっとサポートすることを願っています。