이 기사에서는 생성자를 기반으로 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> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <meta http-requiv = "content-type"; 메뉴 </title> <script language = "javaScript"> 함수 sdmenu (id) {if (! document.getElementById ||! document.getElementsByTagName) return false; this.menu = document.getElementById (id); this.submenus = this.menu.getElementsByTagName ( "div"); this.remember = true; 이 .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") }; /*if (this.markCurrent) {var links = this.menu.getElementsByTagName ( "a"); for (var i = 0; i <links.length; i ++) if (links [i] .href == document.location.href) {int 부서지다; }}*/ 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 = (states [i] == 0? "붕괴": ""); }}}; sdmenu.prototype.togglemenu = function (submenu) {if (submenu.classname == "clapsed") this.expandmenu (submenu); else this.collapsemenu (submenu);}; sdmenu.prototype.expandmenu = function (submenu) {var fullHeight = subMenu.getElementsByTagName ( "span") [0] .OffSetHeight; 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) submenu.style.height = newHeight + "px"; else {supmenu.style.Height = "; ""; MainInst.Memorize (); //this.collapseothers(submenu); . 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 {supmenu.style.Height = "; "붕괴"; MainInstance.memorize ()}; this.submenus [i] .classname! = "붕괴") this.collapsemenu (this.submenus [i]); }};*/sdmenu.prototype.memorize = function () {if (this.remember) {var states = new array (); for (var i = 0; i <this.submenus.length; i ++) states.push (this.submenus [i] .classname == "붕괴"? 0 : 1); var d = 새로운 날짜 (); d.settime (d.gettime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + encodeUricomponent (this.menu.id) + "=" + states.join ( "") + "; expires =" + d.togmtstring () + "; path =/"; }}; var mymenu; wind mymenu.init ();}; </script> <style type = "text/css"> html, body {height : 100%; 여백 : 0; 글꼴 크기 : 12px; } span {배경 :#f0dfbe; 국경 : 1px Solid #ffffff; 왼쪽 경계 : 6px 고체 #f2a31b; 너비 : 228px; 높이 : 23px; 디스플레이 : 블록; 라인 높이 : 23px; 왼쪽 패딩 : 20px; } a {패딩 : 3px 0 3px 40px; 디스플레이 : 블록; 색상 :#636363; } #my_menu {너비 : 255px; 배경 :#f7f2e4; 높이 : 100%; } div.sdmenu div.collapsed {height : 25px;} div.sdmenu div {오버플로 : 숨겨진; }. 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> </div> <div> <span> 메뉴 아종 </a> <a href = ">> 메뉴 </a >> href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <#"#">> 메뉴 하위 콘텐트 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#"#"메뉴 하위 콘텐트 <a href ="#"#"#"#. <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐트 </a> <a href = "#">> 메뉴 하위 요소 </a> <a href = "#>> 메뉴 </<a href ="#"<#"<#"<#"<#"<a href =. 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐츠 </a> <a href = "#">> 메뉴 하위 콘텐트 </a> href = "#>> 메뉴 3 메뉴. 3 개의 </span> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <div> </a> </e </a> href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 컨텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 컨텐츠 </a> <a href = ">> 메뉴 3 <<a href ="<a href = "<a href ="<a href = "<a href ="<a href = "<a href ="< 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 컨텐츠 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐트 </a> <a href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> <a href = "#"메뉴 3 개. href = "#">> 메뉴 3 개의 하위 콘텐츠 </a> </div> </div> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.