Este artículo describe el efecto revelador de deslizamiento del menú implementado por JS basado en Constructor. Compártelo para su referencia, como sigue:
La captura de pantalla del efecto de ejecución es la siguiente:
El código específico es el siguiente:
< xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "Content-type" Content = "text/html; charset = utf-8"/> <meta http-equiv = "Content" menú </title> <script language = "javascript"> function sdmenu (id) {if (! document.getElementByid || 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; para (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 = "actual"; romper; }}*/ 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 (""); para (var i = 0; i <states.length; i ++) this.submenus [i] .classname = (estados [i] == 0? "colapsado": ""); }}}; Sdmenu.prototype.togglemenu = function (submenu) {if (submenu.className == "colapsado") this.EXPANDMENU (submenu); de lo contrario. VAR LINKS = Submenu.getElementsByTagName ("A"); for (var i = 0; i <links.length; i ++) fullHeight+= links [i] .Offsetheight; 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) submitu.style.height = newHeight + "px"; else {clearInterval (intid); submitu.style.hehe = ";"; ";"; ";"; MainInstance.Memorize (); //THIS.COLLAPSEOTRAS(Submenu); }; Sdmenu.prototype.collapsemenu = function (submenu) {var minHeight = submenu.getElementsByTagName ("span") [0] .OffsetheTight; var MoveBy = Math.round (this.speed * submenu.getElementsBytagName ("A"). Longitud); var mainInstance = this; var intid = setInterval (function () {var curheight = submenu.offsetheight; var newHeight = CurHeight - MoveBy; if (newHeight> minheight) submitu.style.height = newHeight + "px"; else {clearInterval (intid); submitu.style.height = ";"; ";"; "Clapsed". MainInstance.Memorize (); ! = "colapsado") this.CollapSemenu (this.submenus [i]); }};*/Sdmenu.prototype.memorize = function () {if (this.remember) {var States = new Array (); para (var i = 0; i <this.submenus.length; i ++) estados.push (this.submenus [i] .classname == "colapsado"? 0: 1); var d = nueva fecha (); d.setTime (d.gettime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + encodeuricomponent (this.menu.id) + "=" + states.Join ("") + "; expires =" + d.togmtstring () + "; path =/"; }}; var mymenu; window.onload = function () {mymenu = new sdmenu ("my_menu"); mymenu.init ();}; </script> <style type = "text/css"> html, cuerpo {altura: 100%; margen: 0; tamaño de fuente: 12px; } span {fondo:#f0dfbe; borde: 1px sólido #ffffff; Border-izquierda: 6px Solid #F2A31B; Ancho: 228px; Altura: 23px; Pantalla: bloque; Línea de altura: 23px; RODING-LUFE: 20px; } a {relleno: 3px 0 3px 40px; Pantalla: bloque; Color:#636363; } #my_menu {ancho: 255px; Antecedentes:#F7F2E4; Altura: 100%; } div.sdmenu div. colapsed {altura: 25px;} div.sdmenu div {desbordamiento: oculto; } </style> </head> <body> <div style = "float: left" id = "my_menu"> <div> <span> menú un </span> <a href = "#" >> subcontent de menú </a> <a href = "#" >> menú subcontent </a> <a href = "#" >> menú subcontent </aa <a href#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"" subcontent </a> <a href = "#" >> Menú subcontent </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent de menú </a> </aw> <div> <span> subcontent de menú </a> <a href = "#" >> menú subcontent. href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent </a> <a href = "#"#"#"#"#" <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontente de menú </a> <a href = "#" >> subcontent de menú </a> <a href = "#" >> subcontent </a> <a href = "#"#"#" "#" "" subcontent </a> <a href = "#" >> Menú subcontent </a> <a href = "#" >> Menú subcontent </a> <a href = "#" >> menú subcontent </a> <a href = "#" >> subcontent de menú </a> href = "#" >> menú tres subcontent </a> </diviest. Three</span> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> </div> <div> <span>Menu Three Sub-Content</a> <a href = "#" >> Menú tres subcontent </a> <a href = "#" >> menú tres subcontentes </a> <a href = "#" >> menú tres subcontent </a> <a href = "#" >> menú tres subcontent </a> <a href = "#" >> menú tres subcontent </a> <ah href = "#"#"#">> "menú>>" menú>> "menú>>" Menú ">>" Menú ">>" Menú ">" Menú "" A. Subcontent </a> <a href = "#" >> menú tres subcontent </a> <a href = "#" >> menú tres sub-contenido </a> <a href = "#" >> menú tres subcontent </a> <a href = "#" >> menú tres subcontent </a> <a href = "#" >> href = "#" >> menú tres subcontentes </a> </div> </div> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.