この記事では、コンストラクターに基づいてJSによって実装されたメニュースライディングの表示効果について説明します。次のように、参照のために共有してください。
実行効果のスクリーンショットは次のとおりです。
特定のコードは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>> <meta http-equiv = "content-type" "メニュー</title> <スクリプト言語= "javascript"> function sdmenu（id）{if（！document.getElementbyId ||！document.getElementsByTagname）return false; this.menu = document.getElementById（id）; this.submenus = this.menu.getelementsbytagname（ "div"）; this.remember = true; this.speed = 1; this.markCurrent = true; this.onesmonly = false;} sdmenu.prototype.init = function（）{var maininstance = this; for（var i = 0; i <this.submenus.length; i ++）this.submenus [i] .getelementsbytagname（ "span"）[0] .onclick = function（）{maininstance.togglemenu（this.parentnode）; }; /*if（this.markcurrent）{var links = this.menu.getelementsbytagname（ "a"）; for（var i = 0; i <links.length; i ++）if（links [i] .href == document.location.href）{links [i] .classname = "current";壊す; }}*/ if（this.remember）{var regex = new regexp（ "sdmenu_" + encodeuricomponent（this.menu.id） + "=（[01] +）"）; var match = regex.exec（document.cookie）; if（match）{var states = match [1] .split（ ""）; for（var i = 0; i <states.length; i ++）this.submenus [i] .classname =（stathes [i] == 0？ "collapsed"： ""）; }}}; sdmenu.prototype.togglemenu = function（submenu）{if（submenu.classname == "collapsed"）this.expandmenu（submenu）; else.collapsemenu（submenu）;}; sdmenu.prototype.expandmenu = function（submenu）{var fullheight = submenu.getelementsbytagname（ "span"）[0] .offseight; var links = submenu.getelementsbytagname（ "a"）; for（var i = 0; i <links.length; i ++）fullheight+= links [i] .offseethight; var moveby = math.round（this.speed * links.length）; var maininstance = this; var intid = setInterval（function（）{var curheight = submenu.offsetheight; var newheight = curheight + moveby; if（newheight <fullheight）submenu.style.height = newheight + "px"; else（clearinterval（intid）; submenu.style.height = " ""; mamorize（）、10）; //this.collapsothers(submenu）; }; sdmenu.prototype.collapsemenu = function（submenu）{var minheight = submenu.getelementsbytagname（ "span"）[0] .offseeth; var moveby = math.round（this.speed * submenu.getelementsbytagname（ "a"）。length）; var maininstance = this; var intid = setInterval（function（）{var curheight = submenu.offsetheight; var newheight = curheight -moveby; if（newheight> minheight）submenu.style.height = newheight + "px"; else interval（intid）; submenu.style.height = " "Collapsed"; memorize（）; this.submenus [i] .classname！= "collapsed"）this.collapsemenu（this.submenus [i]）; }};*/sdmenu.prototype.memorize = function（）{if（this.remember）{var stathes = new array（）; for（var i = 0; i <this.submenus.length; i ++）state.push（this.submenus [i] .classname == "collapsed"？0：1）; var d = new date（）; D.Settime（d.getTime（） +（30 * 24 * 60 * 60 * 1000））; document.cookie = "sdmenu_" + encodeuricomponent（this.menu.id） + "=" + state.join（ ""） + "; expires =" + d.togmtstring（） + "; path =/"; }}; var mymenu; window.onload = function（）{mymenu = new sdmenu（ "my_menu"）; mymenu.init（）;}; </script> <style type = "text/css"> html、body {height：100％;マージン：0;フォントサイズ：12px; } span {background：＃f0dfbe;ボーダー：1pxソリッド#ffffff;国境左：6pxソリッド＃F2A31B;幅：228px;高さ：23px;表示：ブロック;ラインハイト：23px;パディング左：20px; } a {パディング：3px 0 3px 40px;表示：ブロック;色：＃636363; } #my_menu {width：255px;背景：＃f7f2e4;高さ：100％; } div.sdmenu div.collapsed {height：25px;} div.sdmenu div {overflow：hidden; } </style> </head> <body> <div style = "float：left" id = "my_menu"> <div> <span>メニュー1サブコンテンツ</a> <a href = "＃" >>メニューサブコンテント</a> <a href = "＃" >>メニューサブコンテンツ</a> <a href = "＃" >>メニューサブコンテンツ</a> </div> <div> <span>メニューサブコンテント</a> < href = "＃" >>メニューサブコンテント</a> <a href = "＃" >>メニューサブコンテンント</a> <a href = "＃" >>メニューサブコンテント</a> <a href = "＃" >>メニューサブコンテンツ</a> </a> <a href = "＃" <a href = "＃" >>メニューサブコンテント</a> <a href = "＃" >>メニューサブコンテンツ</a> <a href = "＃" >>メニューサブコンテンツ</a> <a href = ">>メニューサブコンテンツ</a> </a> <a href ="サブコンテンツ</a> <a href = "＃" >>メニューサブコンテント</a> <a href = "＃" >>メニューサブコンテンント</a> <a href = "＃" >>メニューサブコンテンント</a> 3つの</span> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃" >> 3つのサブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> href = "＃" >>メニュー3つのサブコンテント</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃">サブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃" >>メニュー3サブコンテンツ</a> <a href = "＃"＃ ">>メニュー3サブセント</a> < href = "＃" >>メニュー3サブコンテント</a> </div> </div> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。