この記事では、私がネイティブ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をもっとサポートすることを願っています。