แม้ว่าจะมีปลั๊กอินมากมาย แต่เพื่อปรับปรุงด้วยกัน แต่ฉันได้ทำตัวอย่างชุดของซีรี่ส์การปฏิบัติ JavaScript และแบ่งปันกับคุณ หากคุณมีข้อเสนอแนะที่ดีโปรดชี้ให้เห็นพวกเขาเพื่อที่คุณจะได้ไม่เข้าใจผิดลูก ๆ ของคุณ!
วันนี้คือการต่อสู้ครั้งแรก: เมนูที่มีคอลเลกชันและเอฟเฟกต์ภาพเคลื่อนไหวปล่อยเอฟเฟกต์มีดังนี้: (สไตล์ค่อนข้างน่าเกลียด (-^-))
(เนื่องจากฉันใช้บรรณาธิการที่แตกต่างกันเมื่อฉันเขียนบทความนี้เอฟเฟกต์การสาธิตไม่สามารถเพิ่มได้ในขณะนี้คือ: รหัสที่สมบูรณ์ขั้นสุดท้ายและการสาธิต)
เอฟเฟกต์แอนิเมชั่น: เมาส์โฮเวอร์เปลี่ยนพื้นหลังและสีตัวอักษรของเป้าหมายทั้งหมดย้ายเมาส์ไปที่ 'การนำทางโฮมเพจ' แสดงเมนูการจัดกลุ่มด้านล่าง เมนูการจัดกลุ่มมีเมนูย่อย คลิกเพื่อซูมซึ่งจะนำไปสู่เอฟเฟกต์แอนิเมชั่นที่มากเกินไป! นอกจากนี้คุณสามารถเพิ่มและลบเมนูการนำทางและเมนูย่อยตามความประสงค์โดยไม่ส่งผลกระทบต่อผลกระทบ!
จะบรรลุได้อย่างไร?
ขั้นตอนที่ 1: จะใช้อะไรในการใช้เมนู รหัส HTML ได้รับการออกแบบดังนี้ตามหลักการของการแยกรหัส JS และรหัส HTML! คุณไม่เห็นรหัส JS ที่นี่
นี่คือสิ่งที่ดูเหมือนก่อนที่สไตล์จะถูกนำไปใช้: มันเก่ามาก! - -
ขั้นตอนที่ 2: สไตล์ CSS เมาส์โฮเวอร์เปลี่ยนพื้นหลังและสีตัวอักษรของเป้าหมายทั้งหมดและใช้การเปลี่ยนแปลง CSS โดยตรงและ: โฮเวอร์ อย่างไรก็ตามเราจะไม่แสดงรายการเค้าโครงสไตล์ CSS อื่น ๆ ทั้งหมด มาทำด้วยตัวเอง ให้ความสนใจกับประเด็นต่อไปนี้:
#ul {.... z-index: 100; } #ul li {display: inline-block; ตำแหน่ง: ญาติ; ด้านบน: 0; ซ้าย: -25px; ความกว้าง: 10%; ความกว้างขั้นต่ำ: 70px; ความสูง: 30px; TEXT-ALIGN: CENTER; ระดับความสูง: 30px; เส้นขอบ: 1px ของแข็งสีเทา; แนวชายแดน: 10px; พื้นหลังสี: AliceBlue; เคอร์เซอร์: ตัวชี้; -webkit-transition: ทั้งหมดง่ายขึ้น 0.3s; -MOZ-TRANSITION: ความสะดวกในการออก 0.3s; -MS-TRANSITION: ความสะดวกในการออก 0.3s; -O-TRANSITION: ความสะดวกในการออก 0.3s; การเปลี่ยนแปลง: ทั้งหมดง่าย 0.3s; } #ul li: hover {พื้นหลังสี: aquamarine; สี: สีแดง;} ... . show-hide: hover {พื้นหลังสี: beige} .a-div {พื้นหลังสี: aquamarine; แนวชายแดน: 10px; สี: สีดำ; แสดง: ไม่มี; ความทึบ: 0} .a {z -index: -1; แสดง: บล็อก; -ขั้นตอนที่ 3: ขั้นตอนนี้เป็นจุดสำคัญ หากคุณเพิ่มเหตุการณ์การฟังแต่ละตัวเลือกเมนูและการจัดกลุ่มฉันคิดว่ามันเป็นปัญหามากและจำนวนรหัสต้องมากกว่าหรือน้อยกว่า มีวิธีใดบ้างที่จะเพิ่มการตรวจสอบในองค์ประกอบเพื่อให้บรรลุเป้าหมายหรือไม่?
จะต้องมีคำตอบโดยใช้กลไกการเดือดดาลของเหตุการณ์! เพิ่มการฟังเหตุการณ์บนแท็กองค์ประกอบหลัก UL และเปลี่ยนรูปแบบองค์ประกอบของเหตุการณ์ทริกเกอร์โดยตรงในฟังก์ชั่นการฟังมันง่ายมาก!
รหัสมีดังนี้:
var ul = document.getElementById ('ul'); ul.addeventListener ('Mouseover', Listener1, False); ul.addeventListener ('Mouseout', Listener2, False); ul.addeventListener ('คลิก', Listener3, false);เนื่องจากรุ่น IE8 และด้านล่างไม่มี addeventListener หากคุณต้องการเข้ากันได้คุณต้องเพิ่มรหัสที่เกี่ยวข้องของ attaintEvent
ขั้นตอนที่ 4 : ตัวเอกปรากฏขึ้น! ใช้ฟังก์ชั่นการฟัง Listener1, Listener2, Listener3
ก่อนอื่นให้ใช้ฟังก์ชั่น Listener1 ที่ง่ายที่สุดรหัสมีดังนี้:
ฟังก์ชั่น LISYER1 (เหตุการณ์) {// 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'; var i = 0; var id; (function foo () {ถ้า (i> = 1) {cleartimeout (id); id = null; return;} i+= 0.2; div1.style.opacity = i; id = settimeout (ฟังก์ชัน () {cleartimeout (id); foo ()}, 30);}) (); -อีกครั้งทุกอย่างมีไว้สำหรับ IE8 และรุ่นเก่า
1. เนื่องจากเหตุการณ์ไม่มีแอตทริบิวต์เป้าหมายเฉพาะแอตทริบิวต์ SRCELEMENT ที่สอดคล้องกัน
2. และเหตุการณ์ประโยคนี้ = เหตุการณ์ || window.event; สามารถละเว้นได้จริงที่นี่ เฉพาะเมื่อใช้แอตทริบิวต์เพื่อตั้งค่าการฟังเหตุการณ์การลงทะเบียนเช่น ul.onmouseover = function () {} หรือ <ul onmouseover = 'func'>, IE8 และรุ่นเก่าสามารถรับวัตถุเหตุการณ์ปัจจุบันผ่าน window.event
ตกลงตอนนี้คุณได้รับเป้าหมายของเหตุการณ์ทริกเกอร์ในปัจจุบันสิ่งต่าง ๆ นั้นง่ายกว่ามากซึ่งคุณสามารถเปลี่ยนแปลงตัวเองและญาติของมันได้!
ต่อไปนี้เป็นฟังก์ชั่น Listener2 ซึ่งถูกเรียกใช้เมื่อ Mouseout ส่วนใหญ่จะจัดการกับองค์ประกอบของเด็กเป้าหมาย Div, รหัสมีดังนี้:
ฟังก์ชั่น Listener2 (เหตุการณ์) {// event = event || window.event; var target = event.target || event.srecelement; if (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementsByTagname ('div') [0]; div1.onmouseover = function () {div1.style.display = 'block'; div1.style.Opacity = 1; - div1.onmouseout = function () {div1.style.display = 'none'; div1.style.Opacity = 0; - div1.style.display = 'ไม่มี'; // กลุ่มนี้จะซ่อน DIV1 เมื่อเมาส์ออกไปจากด้านบน div1.style.Opacity = 0; -โอเคตอนนี้เอฟเฟกต์ส่วนใหญ่ประสบความสำเร็จและมีขั้นตอนสุดท้ายนั่นคือตัวเอกหมายเลข 1: ฟังก์ชั่น Listener3 ซึ่งส่วนใหญ่รับผิดชอบต่อเอฟเฟกต์การปรับขนาดเมื่อคลิกเมาส์!
หลักการดำเนินการ:
1. กำหนดตัวแปรบูลนอกฟังก์ชั่นเป็นสวิตช์คลิกที่เมาส์แล้วคลิกที่ปิดอีกครั้ง
2. ใช้ Settimeout เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวเปลี่ยนแอตทริบิวต์ความสูงและความทึบของเมนูย่อยและแอตทริบิวต์การแสดงผล
รหัสที่สมบูรณ์มีดังนี้:
var bool = true; ฟังก์ชั่น Listener3 (เหตุการณ์) {var event = event || window.event; var target = event.target || เหตุการณ์. if (target.className === 'show-hide') {var parent = target.parentElement; var adiv = parent.getElementsByClassName ('a-div') [0]; if (window.getComputedStyle (adiv, null) .Opacity> 0.5) {bool = false} else {bool = true} var height = 90, ChangeH, Opacity, ID; if (bool) {changeH = 0; ความทึบ = 0; Target.innerhtml = 'Financial-'; (ฟังก์ชั่นแสดง () {ถ้า (เปลี่ยนความสูง) {cleartimeout (id); return} cahnh += 5; opacity += 0.06; //console.log('Opacity:'+adiv.style.opacity+', height: ' +adiv.style.height); adiv.style.display = 'block'; bool = false; } else {changeH = ความสูง; ความทึบ = 1; target.innerhtml = 'financial+'; (ฟังก์ชั่น hidden () {ถ้า (เปลี่ยน <0) {cleartimeout (id); adiv.style.display = 'none'; return} ChangeH -= 10; Opacity -= 0.11; //console.log('Opacity:' 'px'; bool = true; -บางจุดควรทราบ:
1. อย่าลืมล้างรหัสของ settimeout และออกมิฉะนั้นลูปที่ตายแล้วจะเหมือนถ้า (เปลี่ยน <0) {cleartimeout (id); adiv.style.display = 'none'; return}
2. เวลาหน่วงของการตั้งถิ่นฐานถูกตั้งค่าเป็น 16.7 เนื่องจากเป็นไปตามอัตราการรีเฟรชของหน้าจอ 60fps ซึ่งทำให้ดูสะดวกสบาย
3. ในระหว่างกระบวนการดีบักเมื่อตั้งค่าการเพิ่มขึ้นและลดค่าของการเปลี่ยนแปลงและความทึบแสงอย่าลืมพิมพ์ออกมาเพื่ออำนวยความสะดวกในการดีบัก:
console.log ('ความทึบ:'+adiv.style.Opacity+', ความสูง:'+adiv.style.height);
4. ในที่สุดสิ่งที่สำคัญที่สุดในการใช้งานเมนูทั้งหมดคือประโยคต่อไปนี้ หากไม่มีประโยคนี้คุณจะไม่สามารถใช้ฟังก์ชั่นทั้งหมดได้อย่างสมบูรณ์แบบ ตัวอย่างเช่น: เมื่อคุณคลิกที่กลุ่มเมนูย่อยแล้วย้ายไปยังกลุ่มอื่นสถานการณ์จะแตกต่างกันมาก และเหตุผลที่ window.getComputedStyle ใช้สิ่งนี้คือเมื่อคุณเปิดเป็นครั้งแรกการคลิกกลุ่มใด ๆ ไม่ตอบสนองเนื่องจากไม่สามารถรับค่าความทึบได้เมื่อคลิกครั้งแรกผ่านเหตุการณ์กำหนดเป้าหมายโดยตรง
if (window.getComputedStyle (adiv, null) .Opacity> 0.5) {bool = false} อื่น {bool = true};
อย่างไรก็ตามวิธี getComputedStyle ไม่ได้รับการสนับสนุนด้านล่าง IE9 และวัตถุองค์ประกอบ IE มีคุณสมบัติ CurrentStyle;
หากคุณไม่คุ้นเคยกับการประมวลผล CSS ให้ดูที่สรุปของฉัน: สรุปวิธีการอ่านและเขียนสไตล์ CSS โดยใช้ JS ดั้งเดิม
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับแอปพลิเคชันของเมธอด settimeout () ลองดูที่นี่: คุณรู้หรือไม่ว่า SetTimeOut ทำงานอย่างไร
สำหรับกลไกการจัดการเหตุการณ์คุณสามารถดูสิ่งนี้ได้: ภาพรวมของการจัดการเหตุการณ์ใน DOM และการวิเคราะห์ที่ครอบคลุมเกี่ยวกับหลักการของการจัดการเหตุการณ์ใน DOM
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น