تصف هذه المقالة القائمة المنزلق للكشف عن التأثير الذي تنفذه JS على أساس مُنشئ. شاركه للرجوع إليه ، على النحو التالي:
لقطة شاشة تأثير الجري كما يلي:
الرمز المحدد كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> القائمة </title> <script language = "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.peed = 1 ؛ this.markCurrent = صحيح ؛ this.onesmonly = false ؛} sdmenu.prototype.init = function () {var maininstance = this ؛ لـ (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") ؛ لـ (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 ("") ؛ لـ (var i = 0 ؛ i <states.length ؛ i ++) this.submenus [i] .className = (states [i] == 0؟ }}} ؛ sdmenu.prototype.togglemenu = function (submenu) {if (submenu.className == "lollapsed") this.expandmenu (menu) ؛ آخر this.collapsemenu (Minmenu) ؛} ؛ sdmenu.prototype.expandmenu = function (submenu) {var fullheight = submenu.getelementsbytagname ("span") [0]. ارتباطات var = menu.getElementsByTagName ("a") ؛ لـ (var i = 0 ؛ i <links.length ؛ i ++) fullheight+= links [i] .offSetheight ؛ var moveby = math.round (this.speed * links.length) ؛ var maininstance = هذا ؛ var intid = setInterval (function () {var curheight = submenu.offsetheight ؛ var newheight = curheight + moveby ؛ if (newheight <fullheight) subenu.style.height = newHight + "px" ؛ maininstance.memorize () ؛ //this.collapsethers(submenu) ؛ } ؛ sdmenu.prototype.collapsemenu = function (submenu) {var minheight = submenu.getElementSbyTagname ("span") [0] .OffSeTheight ؛ var moveby = math.round (this.speed * submenu.getElementSbyTagName ("a"). length) ؛ var maininstance = هذا ؛ var intid = setInterval (function () {var curheight = submenu.offsetheight ؛ var newheight = curheight - moveby ؛ if (newheight> minheight) submenu.style.height = newHight + "px" ؛ maininstance.memorize () ؛ this.submenus [i] .className! = "Glapsed") this.collapsemenu (this.submenus [i]) ؛ }} ؛*/sdmenu.prototype.memorize = function () {if (this.remember) {var states = new array () ؛ لـ (var i = 0 ؛ i <this.submenus.length ؛ i ++) states.push (this.submenus [i] .className == "Glacksed"؟ 0: 1) ؛ var d = new Date () ؛ 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 ، body {height: 100 ٪ ؛ الهامش: 0 ؛ حجم الخط: 12 بكسل ؛ } span {background:#f0dfbe ؛ الحدود: 1 بكسل Solid #ffffff ؛ الحدود اليسرى: 6px الصلبة #f2a31b ؛ العرض: 228 بكسل ؛ الارتفاع: 23 بكسل ؛ العرض: كتلة ؛ Line-Leight: 23px ؛ حشو اليسار: 20 بكسل ؛ } a {padding: 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"> <viv> <span> قائمة واحدة </span> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> subcytent </a> <a href = "#"> المقتطف الفرعي </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> </div> <siv> <span> </a> </a> <a href = "#" href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" Subcontent </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" ثلاثة </span> <a href = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> قائمة ثلاثة-<span> <a-acontent <a href = "#" >> القائمة الفرعية </a> HREF = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة الفرعية </a> <a href = "#" المحتوى الفرعي </a> <a href = "#" >> القائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة ثلاثية الفرعية </a> <a href = "#" >> قائمة ثلاثة محتوى فرعي </a> <a href = "#" >> القائمة ثلاثية </a> <a href = " HREF = "#" >> القائمة ثلاثة محتوى فرعي </a> </viv> </viv> </body> </html>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.