이 기사는 내가 js에 쓴 다양한 메뉴 효과를 계속 추가 할 것입니다. 인터넷에서 많이 검색했지만 여전히 직접 쓰고 싶습니다!
이것은 이전 기사입니다 : JavaScript 실제 전투 (애니메이션 효과 수집 및 출시가있는 내비게이션 메뉴)
다음은 최적화 된 완전한 코드, 최적화 된 CSS 스타일, 단순화 된 이벤트 기능, HTML 레벨 감소 및 20 줄 이상의 중복 코드를 삭제 한 것입니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <cript> wind if (ul.addeventListener) {ul.addeventListener ( 'mouseover', lister1, true); ul.addeventListener ( '마우스 아웃', Listener2, True); ul.addeventListener ( 'Click', Listener3, False); } else if (ul.attachevent) {// ie8 및 이전 버전 ul.attachevent ( 'onmouseover', liarser1, false)와 호환됩니다. ul.attachevent ( 'OnmouseOut', Listener2, False); ul.attachevent ( 'onclick', liater3, false); } function learser1 (이벤트) {// event = event || window.event; // IE8 및 이전 버전과 호환 가능 var target = event.target || event.srcelement; // if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsByTagName ( 'div') [0]; div1.style.display = '블록'; div1.style.opacity = 1; }} function learser2 (이벤트) {// 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; 함수 리스너 3 (이벤트) {var event = event || Window.event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var adiv = target.nextElementsibling; if (wind if (bool) {changeh = 0; 불투명도 = 0; var text = target.innerhtml.slice (0, -1); target.innerhtml = text+' -'; (함수 show () {if (changeh> height) {cleartimeout (id); return} changeh += 5; 불투명도 += 0.06; console.log ( 'oppacity :' +adiv.style.opacity +', height :' +adiv.style.height); adiv.style.height = changeh +'px'; optority. = 'block'; id = settimeout (function () {cleartimeout (id); show ();}) (); bool = false; } else {changeh = 높이; 불투명도 = 1; var text = target.innerhtml.slice (0, -1); target.innerhtml = text +' +'; (함수 hidden () {if (changeh <0) {cleartimeout (id); adiv.style.display = 'none'; return} changeh- = 10; acacity -= 0.11; console.log ( '+adiv.style.opacity :'+adiv.style.opacity+','+adiv.style.height. adiv.style.opacity = 불투명; settimeout (function (id); hidden (), 16.7); bool = true; }}}}}}; </script> <tyle> *{마진 : 0; 패딩 : 0; } a, img {border : 0;} ul {위치 : 절대; 상단 : 20px; 왼쪽 : 30px; Z- 인덱스 : 100; } #ul li {디스플레이 : 인라인-블록; 위치 : 상대; 높이 : 30px; 텍스트 정렬 : 센터; 라인 높이 : 30px; 패딩 : 3px; 테두리 : 1px 단단한 회색; Border-Radius : 10px 10px 0 0; 배경색 : Aliceblue; 커서 : 포인터; -webkit-transition : 모든 용이성 0.3s; -Moz-transition : 모든 편안함 0.3s; -ms-transition : 모든 편안함 0.3s; -o-ransition : 모든 편안함 0.3s; 전환 : 모든 용이성 0.3s; } #ul li : 호버 {배경색 : aquamarine;} .nav-div {위치 : 절대; 너비 : 100%; 왼쪽 : -1px; 상단 : 37px; 디스플레이 : 없음; 테두리 : 1px 단단한 회색; 테두리 : 0; Border-Radius : 0 0 10px 10px; 배경색 : Aliceblue; } .Show-hide {위치 : 상대; 디스플레이 : 블록; Border-Radius : 0 0 10px 10px; 배경색 : Lightblue; -webkit-transition : 모든 용이성 0.3s; -Moz-transition : 모든 편안함 0.3s; -ms-transition : 모든 편안함 0.3s; -o-ransition : 모든 편안함 0.3s; 전환 : 모든 용이성 0.3s; 국경-바닥 : 1px 단단한 회색; } .Show-hide : hover {back 디스플레이 : 없음; Border-Radius : 0 0 10px 10px; 불투명도 : 0} .a {z -index : -1; 디스플레이 : 블록; 텍스트 결정 : 없음; Border-Radius : 10px; -webkit-transition : 모든 용이성 0.3s; -Moz-transition : 모든 편안함 0.3s; -ms-transition : 모든 편안함 0.3s; -o-ransition : 모든 편안함 0.3s; 전환 : 모든 용이성 0.3s; } .a : 호버 {back 추가 ... </a> </div> <span> 다른 특수 효과+</span> <div> <a href = ""> 연속적으로 추가 ... </a> <a href = ""> 연속적으로 추가 ... </a> <a href = ""> 연속적으로 추가 ... </a> <a href = ""> </div> </div> </div> </div> </div> 최적화 <div> <span> financial+</span+</span> <div> <a href = ""> 오늘의 헤드 라인 </a> <a href = ""> 모든 뉴스 </a> <a href = ""> 이전 리뷰 </a> </div> <span> 기술+</span> <div> <a href = ""> 오늘의 헤드 라인 </a> 뉴스 </a> <a href = ""> 과거의 검토 </a> </div> </li> <li> 오늘의 뉴스 <div> <li> Financial+</span </span> <div> <a href = ""> 오늘의 헤드 라인 </a> <a href = "> 모든 뉴스 </a> <a href ="> </a> <a href = ""> </div> <span> Technology+</span> <div> <a href = "> 오늘의 헤드 라인 </a> <a href =" "> 모든 뉴스 </a> <a href =" "> 과거 검토 </a> </li> </li> </ul> </body> </html>생식 이미지 :
다음은 두 번째 특수 효과입니다. (특정 구현은 첫 번째 구현보다 훨씬 간단하며 주로 CSS 레이아웃에주의를 기울입니다)
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin : 0; 패딩 : 0; } a, img {border : 0;} #menu {위치 : 절대; 상단 : 30px; 왼쪽 : 0; 오른쪽 : 0; 마진 : 자동; 너비 : 400px; 왼쪽 경계 : 1px 단단한 회색; 테두리 : 1px 단단한 회색; 배경색 : 레몬 치폰; 텍스트 정렬 : 센터; } #menu li {목록 스타일 : 없음; 플로트 : 왼쪽; 너비 : 99px; 높이 : 30px; 라인 높이 : 30px; 경계 오른쪽 : 1px 단단한 회색; 배경색 : Burlywood; 색상 : 흰색; -webkit-transition : 모든 용이함 0.5s; -Moz-transition : 모든 편안함 0.5s; -ms-transition : 모든 편안함 0.5s; -o-ransition : 모든 편안함 0.5s; 전환 : 모든 용이성 0.5 초; } #menu li : 호버 {배경색 : 레몬 치폰; 색상 : #336699; } .contain {위치 : 절대; 왼쪽 : -1px; 디스플레이 : 없음; 너비 : 399px; 높이 : 300px; 색상 : #336699; 왼쪽 경계 : 1px 단단한 회색; 경계 오른쪽 : 1px 단단한 회색; 국경-바닥 : 1px 단단한 회색; 배경색 : 레몬 치폰; }. if (menu.addeventListener) {Menu.AdDeventListener ( 'MouseOver', show, false); menu.addeventListener ( '마우스 아웃', 숨기기, 거짓); } else if (menu.attachevent) {menu.attachevent ( 'onMouseOver', show, false); menu.attachevent ( 'onmouseout', hide, false); } function show (이벤트) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'block'; } else if (대상. }} 함수 숨기기 (이벤트) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'none'; } else if (대상. }}}} </script> </head> <body> <div id = "menu"> <ul> <li id = "menu1"> Siufu의 특수 효과 1 <div> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111까지의 11111111111111111111111111111111111111111111111111111111까지의 특수 효과 2 <li id = "메뉴"입니다. id = "menu3"> siufu의 특수 효과 3 <div> 33333333333 </div> </li> <li id = "menu3"> siufu의 특수 효과 3 <div> 3333333333 </div> </li> <li id = "menu4"> Sufu의 특수 효과 4 <div> </li> </ul> </div> </body> </html>생식 이미지 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.