この記事では、私がネイティブJSで書いたさまざまなメニュー効果を引き続き追加します。私はインターネットでたくさん検索しましたが、それでも自分で書くのが好きです!
これは前の記事です:JavaScriptの実用的な戦闘(アニメーション効果の収集とリリースを伴うナビゲーションメニュー)
以下は、最適化された完全なコード、最適化されたCSSスタイル、単純化されたイベント機能、HTMLレベルの低下、少なくとも20行の冗長コードを削除しました。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script> window.onload = function(){// ========== = = = = = = = = = = = = = = = = = = dcalingアニメーションメニューvar UL = document.getelementbyid( 'ul'); if(ul.addeventlistener){ul.addeventlistener( 'mouseover'、listener1、true); ul.addeventlistener( 'mouseout'、ristener2、true); ul.addeventlistener( 'click'、listener3、false); } else if(ul.attachevent){// IE8および以前のバージョンul.Attachevent( 'onmouseover'、ristener1、false)と互換性があります。 ul.attachevent( 'onmouseout'、listener2、false); ul.attachevent( 'onclick'、listener3、false); } 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'; div1.style.opacity = 1; }} 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.style.display = 'none'; div1.style.opacity = 0; div1.onmouseover = function(){div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function(){div1.style.display = 'none'; div1.style.opacity = 0; }; }} var bool = true; functionリスナー3(event){var event = event || window.event; var target = event.target || event.srcelement; if(target.classname === 'show-hide'){var adiv = target.nextelementionibling; if(window.getComputedStyle(adiv、null).opacity> 0.5){bool = false} else {bool = true} var height = 90、changeh、ofacity、id; if(bool){changeh = 0;不透明= 0; var text = target.innerhtml.slice(0、-1); Target.innerhtml = text+' - '; (function show(){if(changeh> height){cleartimeout(id); return} changeh += 5; ofacity += 0.06; console.log( 'opacity:' +adiv.style.opacity +'、height:' +adiv.style.height); adiv.style.display = 'block' = function(){cleartimeout();}、16.7); bool = false; } else {changeh = height;不透明= 1; var text = target.innerhtml.slice(0、-1); Target.innerhtml = text +' +'; (function hidden(){if(changeh <0){cleartimeout(id); adiv.style.display = 'none'; return} changeh - = 10; ofacity- = 0.11; console.log( 'ofacity:'+adiv.style.opacity+'、height:'+adiv.height); adiv.style.opacity = opacity; bool = true; }}}}}}; </script> <style> *{マージン:0;パディング:0; } a、img {border:0;} ul {position:absolute;トップ:20px;左:30px; z-index:100; } #ul li {display:inline-block;位置:相対;高さ:30px;テキストアライグ:センター; Line-Height:30px;パディング:3px;ボーダー:1pxソリッドグレー; Border-Radius:10px 10px 0 0;背景色: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;} .nav-div {position:absolute;幅:100%;左:-1px;トップ:37px;表示:なし;ボーダー:1pxソリッドグレー;ボーダートップ:0;ボーダーラジウス:0 0 10px 10px;背景色:AliceBlue; } .show-hide {position:relative;表示:ブロック;ボーダーラジウス:0 0 10px 10px;背景色:LightBlue; -webkit-transition:すべてが0.3秒の容易さ。 -moz-transition:すべての容易さ0.3秒。 -ms-transition:すべての容易さ0.3秒; -O-Transition:すべての容易さ0.3秒;遷移:すべての容易さ0.3秒。境界線:1pxソリッドグレー; } .show-hide:hover {background-color:lavender} .a-div {background-color:aliceblue;表示:なし;ボーダーラジウス:0 0 10px 10px;不透明:0} .a {z -index:-1;表示:ブロック;テキスト装置:なし;ボーダーラジウス:10px; -webkit-transition:すべてが0.3秒の容易さ。 -moz-transition:すべての容易さ0.3秒。 -ms-transition:すべての容易さ0.3秒; -O-Transition:すべての容易さ0.3秒;遷移:すべての容易さ0.3秒。 } .A:hover {background-color:lavender} </style> </head> <body> <ul id = "ul"> <li> javascript practical <div> <li>ナビゲーション効果+</span> <div> <a href = "">は撤回して配置できます。追加... </a> </div> <span>その他の特殊効果+</span> <div> <a href = "">連続的に追加... </a> <a href = "">継続的に追加... </a> <a href = "" <span>財務+</span> <div> <a href = "">今日の見出し</a> <a href = "">すべてのニュース</a> <a href = "">以前のレビュー</a> </div> <span> </span> <div> <a href = "">今日href = "">過去のレビュー</a> </div> </li> <li>今日のニュース<div> <span>金融+</span> <div> <a href = "">今日の見出し</a> <a href = "">すべてのニュース</a> <a href = "" <Span>テクノロジー+</span> <div> <a href = "">今日の見出し</a> <a href = "">すべてのニュース</a> <a href = "">過去のレビュー</a> </div> </li> </ul> </body> </html>複製画像:
以下は2番目の特殊効果です。(特定の実装は最初のものよりもはるかに簡単です。主にCSSレイアウトに注意を払ってください)
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin:0;パディング:0; } a、img {border:0;} #menu {position:absolute;トップ:30px;左:0;右:0;マージン:自動;幅:400px;国境左:1pxソリッドグレー。ボーダートップ:1pxソリッドグレー。バックグラウンドカラー:lemonchiffon;テキストアライグ:センター; } #menu li {list-style:none;フロート:左;幅:99px;高さ:30px; Line-Height:30px;国境右:1pxソリッドグレー。バックグラウンドカラー:バーリーウッド。色:白; -webkit-transition:すべてが0.5秒の容易さ。 -moz-transition:すべての容易さ0.5秒; -ms-transition:すべての容易さ0.5秒; -O-Transition:すべての容易さ0.5秒;遷移:すべての容易さ0.5秒; } #menu li:hover {background-color:lemonchiffon;色:#336699; } .contain {position:absolute;左:-1px;表示:なし;幅:399px;高さ:300px;色:#336699;国境左:1pxソリッドグレー。国境右:1pxソリッドグレー。境界線:1pxソリッドグレー;バックグラウンドカラー:lemonchiffon; } </style> <script> window.onload = function(){var menu = document.getElementById( 'menu'); if(menu.addeventlistener){menu.addeventlistener( 'mouseover'、show、false);メニュー。AddeventListener( 'mouseout'、hide、false); } else if(menu.attachevent){menu.attachevent( 'onmouseover'、show、false); menu.attachevent( 'onmouseout'、hide、false); } function show(event){var target = event.target || event.srcelement; if(target.tagname.tolowercase()=== 'li'){target.firstelementchild.style.display = 'block'; } else if(target.parentnode.tagname.tolowercase()=== 'li'){target.style.display = 'block'; }} function hide(event){var target = event.target || event.srcelement; if(target.tagname.tolowercase()=== 'li'){target.firstelementchild.style.display = 'none'; } else if(target.parentnode.tagname.tolowercase()=== 'li'){target.style.display = 'none'; }}} </script> </head> <body> <div id = "menu"> <ul> <li id = "menu1"> siufuの特殊効果1 <div> 11111111111111111111111111111111111111111111111111111111> id = "menu3"> siufuの特殊効果3 <div> 3333333333333 </div> </li> <li id = "menu3"> siufuの特殊効果3 <div> 33333333333 </div> </li> <li id = "menu4" </li> </ul> </div> </body> </html>複製画像:
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。