บทความนี้จะยังคงเพิ่มเอฟเฟกต์เมนูต่าง ๆ ที่ฉันเขียนใน JS ดั้งเดิม แม้ว่าฉันจะค้นหาบนอินเทอร์เน็ตมาก แต่ฉันก็ยังชอบเขียนด้วยตัวเอง!
นี่คือบทความก่อนหน้านี้: JavaScript Practical Combat (เมนูนำทางพร้อมการรวบรวมและปล่อยเอฟเฟกต์ภาพเคลื่อนไหว)
ต่อไปนี้เป็นรหัสที่สมบูรณ์ที่ได้รับการปรับปรุงรูปแบบ CSS ที่ได้รับการปรับปรุงฟังก์ชั่นเหตุการณ์ที่ง่ายขึ้นลดระดับ HTML และลบรหัสซ้ำซ้อนอย่างน้อย 20 บรรทัด
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <tite> <title> <title> <title> <title> if (ul.addeventListener) {ul.addeventListener ('Mouseover', Listener1, true); ul.addeventListener ('Mouseout', Listener2, True); ul.addeventListener ('คลิก', Listener3, false); } อื่นถ้า (ul.attachevent) {// เข้ากันได้กับ IE8 และเวอร์ชันก่อนหน้า ul.attachevent ('onmouseover', Listener1, false); ul.attachevent ('onmouseout', Listener2, false); ul.attachevent ('onclick', listener3, false); } ฟังก์ชั่น Listener1 (เหตุการณ์) {// event = event || window.event; // เข้ากันได้กับ IE8 และเวอร์ชันก่อนหน้า var target = event.target || event.srcelement; // เข้ากันได้กับ IE8 และเวอร์ชันก่อนหน้าถ้า (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementsByTagname ('div') [0]; div1.style.display = 'block'; div1.style.Opacity = 1; }} ฟังก์ชัน Listener2 (เหตุการณ์) {// event = event || window.event; var target = event.target || event.srecelement; if (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementsByTagname ('div') [0]; div1.style.display = 'ไม่มี'; 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; ฟังก์ชั่น Listener3 (เหตุการณ์) {var event = event || window.event; var target = event.target || เหตุการณ์. if (target.className === 'show-hide') {var adiv = target.nextelementibling; if (window.getComputedStyle (adiv, null) .Opacity> 0.5) {bool = false} else {bool = true} var height = 90, ChangeH, Opacity, ID; if (bool) {changeH = 0; ความทึบ = 0; var text = target.innerhtml.slice (0, -1); target.innerhtml = text+' -'; (ฟังก์ชั่นแสดง () {ถ้า (เปลี่ยนความสูง) {cleartimeout (id); return} cahith += 5; opacity += 0.06; console.log ('ความทึบ:' +adiv.style.Opacity +', ความสูง:' +adiv.style.height); adiv.style.display = 'block'; bool = false; } else {changeH = ความสูง; ความทึบ = 1; var text = target.innerhtml.slice (0, -1); target.innerhtml = text +' +'; (ฟังก์ชั่น hidden () {ถ้า (เปลี่ยน <0) {cleartimeout (id); adiv.style.display = 'none'; return} ChangeH -= 10; Opacity -= 0.11; console.log ('opacity:'+adiv.style.opacity adiv.style.opacity = ความทึบ; id = settimeout (ฟังก์ชั่น () {cleartimeout (id); hidden ();}, 16.7); bool = true; - </script> <style> *{margin: 0; Padding: 0; } a, img {border: 0;} ul {ตำแหน่ง: สัมบูรณ์; ด้านบน: 20px; ซ้าย: 30px; z-index: 100; } #ul li {display: inline-block; ตำแหน่ง: ญาติ; ความสูง: 30px; TEXT-ALIGN: CENTER; ระดับความสูง: 30px; Padding: 3px; เส้นขอบ: 1px ของแข็งสีเทา; แนวชายแดน: 10px 10px 0 0; พื้นหลังสี: AliceBlue; เคอร์เซอร์: ตัวชี้; -webkit-transition: ทั้งหมดง่ายขึ้น 0.3s; -MOZ-TRANSITION: ความสะดวกในการออก 0.3s; -MS-TRANSITION: ความสะดวกในการออก 0.3s; -O-TRANSITION: ความสะดวกในการออก 0.3s; การเปลี่ยนแปลง: ทั้งหมดง่าย 0.3s; } #ul li: hover {พื้นหลังสี: aquamarine;} .nav-div {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ซ้าย: -1px; ด้านบน: 37px; แสดง: ไม่มี; เส้นขอบ: 1px ของแข็งสีเทา; ชายแดนด้านบน: 0; แนวชายแดน: 0 0 10px 10px; พื้นหลังสี: AliceBlue; }. Show-hide {ตำแหน่ง: ญาติ; แสดง: บล็อก; แนวชายแดน: 0 0 10px 10px; พื้นหลังสี: LightBlue; -webkit-transition: ทั้งหมดง่ายขึ้น 0.3s; -MOZ-TRANSITION: ความสะดวกในการออก 0.3s; -MS-TRANSITION: ความสะดวกในการออก 0.3s; -O-TRANSITION: ความสะดวกในการออก 0.3s; การเปลี่ยนแปลง: ทั้งหมดง่าย 0.3s; ขอบด้านล่าง: 1px Solid Grey; }. show-hide: Hover {พื้นหลังสี: Lavender} .a-div {พื้นหลังสี: AliceBlue; แสดง: ไม่มี; แนวชายแดน: 0 0 10px 10px; ความทึบ: 0} .a {z -index: -1; แสดง: บล็อก; การตกแต่งข้อความ: ไม่มี; แนวชายแดน: 10px; -webkit-transition: ทั้งหมดง่ายขึ้น 0.3s; -MOZ-TRANSITION: ความสะดวกในการออก 0.3s; -MS-TRANSITION: ความสะดวกในการออก 0.3s; -O-TRANSITION: ความสะดวกในการออก 0.3s; การเปลี่ยนแปลง: ทั้งหมดง่าย 0.3s; } .a: โฮเวอร์ {พื้นหลังสี: ลาเวนเดอร์} </style> </head> <body><ul id = "ul"> <li> JavaScript ใช้งานจริง <Div> <pan> เอฟเฟกต์การนำทาง+</span> <div> <a href = ">" การเพิ่ม ... </a> </div> <span> เอฟเฟกต์พิเศษอื่น ๆ+</span> <div> <a href = ""> เพิ่มอย่างต่อเนื่อง ... </a> <a href = ""> เพิ่มอย่างต่อเนื่อง ... </a> <a href = ""> เพิ่มขึ้นอย่างต่อเนื่อง ... </a> <a href = " <span> การเงิน+</span> <div> <a href = ""> พาดหัวของวันนี้ </a> <a href = ""> ข่าวทั้งหมด </a> <a href = ""> รีวิวก่อนหน้า </a> </div> <span> เทคโนโลยี+</span> HREF = ""> รีวิวอดีต </a> </div> </li> <li> ข่าววันนี้ <div> <span> การเงิน+</pan> <div> <a href = "" พาดหัวข่าววันนี้ </a> <a href = "" ข่าวทั้งหมด </a> <a href = " <span> เทคโนโลยี+</span> <div> <a href = ""> พาดหัวของวันนี้ </a> <a href = ""> ข่าวทั้งหมด </a> <a href = ""> การตรวจสอบอดีต </a> </div> </li>ภาพการทำซ้ำ:
ต่อไปนี้เป็นเอฟเฟกต์พิเศษที่สอง: (การใช้งานที่เฉพาะเจาะจงนั้นง่ายกว่าครั้งแรกมากโดยส่วนใหญ่ให้ความสนใจกับเค้าโครง CSS)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Padding: 0; } a, img {border: 0;} #menu {ตำแหน่ง: สัมบูรณ์; ด้านบน: 30px; ซ้าย: 0; ขวา: 0; มาร์จิ้น: อัตโนมัติ; ความกว้าง: 400px; ชายแดนซ้าย: 1px ของแข็งสีเทา; ชายแดนด้านบน: 1px Solid Grey; พื้นหลังสี: Lemonchiffon; TEXT-ALIGN: CENTER; } #menu li {list-style: none; ลอย: ซ้าย; ความกว้าง: 99px; ความสูง: 30px; ระดับความสูง: 30px; ชายแดนขวา: 1px Solid Grey; พื้นหลังสี: Burlywood; สี: สีขาว; -webkit-transition: ทั้งหมดง่าย 0.5s; -MOZ-TRANSITION: ความสะดวกในการออก 0.5s; -MS-TRANSITION: ความสะดวกในการออก 0.5s; -O-TRANSITION: ความสะดวกในการออก 0.5s; การเปลี่ยนผ่าน: ความสะดวกในการออก 0.5s; } #menu li: hover {พื้นหลังสี: Lemonchiffon; สี: #336699; } .contain {ตำแหน่ง: สัมบูรณ์; ซ้าย: -1px; แสดง: ไม่มี; ความกว้าง: 399px; ความสูง: 300px; สี: #336699; ชายแดนซ้าย: 1px ของแข็งสีเทา; ชายแดนขวา: 1px Solid Grey; ขอบด้านล่าง: 1px Solid Grey; พื้นหลังสี: Lemonchiffon; } </style> <script> window.onload = function () {var menu = document.getElementById ('เมนู'); if (menu.addeventListener) {menu.addeventListener ('mouseover', แสดง, เท็จ); menu.addeventListener ('mouseout', ซ่อน, เท็จ); } อื่นถ้า (menu.attachevent) {menu.attachevent ('onmouseover', แสดง, เท็จ); menu.attachevent ('onmouseout', ซ่อน, เท็จ); } ฟังก์ชั่นแสดง (เหตุการณ์) {var target = event.target || event.srcelement; if (target.tagname.toLowerCase () === 'li') {target.firstelementchild.style.display = 'block'; } อื่นถ้า (target.parentNode.tagname.toLowerCase () === 'li') {target.style.display = 'block'; }} ฟังก์ชั่นซ่อน (เหตุการณ์) {var target = event.target || event.srcelement; if (target.tagname.toLowerCase () === 'li') {target.firstelementchild.style.display = 'none'; } อื่นถ้า (target.parentNode.tagname.toLowerCase () === 'li') {target.style.display = 'ไม่มี'; }}} </script> </head> <body> <div id = "เมนู"> <ul> <li id = "menu1"> เอฟเฟกต์พิเศษของ Siufu 1 <div> 111111111111 </div> </li> <li id = "menu2"> ผลพิเศษของ Siufu id = "เมนู 3"> เอฟเฟกต์พิเศษของ Siufu 3 <div> 33333333333 </div> </li> <li id = "เมนู 3"> เอฟเฟกต์พิเศษของ Siufu 3 <div> 3333333333 </li></ul> </div> </body> </html>ภาพการทำซ้ำ:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น