เช่นเดียวกับเลเยอร์การกำบังถูกวาดมันง่ายมากที่จะคิดออกว่ามันถูกวาดหรือไม่ แต่มันไม่ง่ายเลยที่นี่ ยิ่งกว่านั้นฉันเลือก Div ที่มีปัญหามากขึ้นเพื่อสร้างแทนที่จะแสดง Div ที่มีอยู่ นี่คือบางจุดที่ต้องการความสนใจเป็นพิเศษ:
1. หลังจากเลเยอร์ฝาครอบปรากฏขึ้นแม้ว่าเมาส์จะไม่ขยับมันก็อยู่ในชั้นปกแล้วและไม่ให้พื้นที่ DIV อีกต่อไปดังนั้นให้ความสนใจกับตำแหน่งการตรวจสอบ
2. Onmouseout และ OnMouseOver นั้นถูกกระตุ้นทันทีซึ่งมีความสำคัญมาก
3. ในแอปพลิเคชันจริงการแสดงของ DIV ที่มีอยู่นั้นมีประสิทธิภาพมากกว่าการสร้างชั่วคราวอย่างแน่นอน
ฉันควรใส่รหัสด้วยวิธีนี้ ในความเป็นจริงสถานที่ก่อนหน้านี้ไม่ได้เปลี่ยนแปลงมากนัก ฉันบันทึกการเปลี่ยนแปลงเท่านั้นซึ่งเป็นที่ที่ผู้ฟัง OnMouseOut ถูกเพิ่มเข้ามา?
var getOnediv = function () {var div = document.createElement ("div"); div.style.position = "สัมบูรณ์"; div.style.display = "block"; div.style.zindex = "10"; div.style.background = "สีเหลือง"; div.addeventListener ("Mouseout", ฟังก์ชั่น (เหตุการณ์) {// ฉันเพิ่มที่นี่และการตัดสินของการตรวจสอบที่นี่เกือบจะเหมือนกับรายการก่อนหน้า var x = event.clientx; var y = event.clienty; ซ้าย = x-test.offsetleft; Bottom = test.offsettop+test.offsetheight-y; div.style.left = test.offsetleft+"px"; if (div.offsetleft> = test.offsetleft+test.offsetWidth) {ClearInterval (ChangeWidth2); } ถ้า (อย่างน้อย == 3) {} ถ้า (อย่างน้อย == 4) {// ออกซิเจนไปทางซ้ายความกว้างเป็นตัวแปรส่วนกลางคราวนี้มันจะลด div.style.left = test.offsetleft+"px"; div.style.top = test.offsettop+"px"; div.style.height = test.offSetheight+"px"; div.style.width = width+"px"; var changeWidth1 = setInterval (function () {ถ้า (div.offsetWidth <= 0) {clearInterval (ChangeWidth1); ตรวจสอบ = true; // นี่เป็นสิ่งสำคัญยิ่งกว่า} อื่น {width = width-10; div.style.width = width+"px"; }}) ส่งคืน div; -ด้วยวิธีนี้ผลของการทำเครื่องหมายและการเข้าสู่จะบรรลุผล ถ้าคุณดูมันง่ายมันจะอยู่ในรูปแบบ อย่างไรก็ตามจะต้องมีการกล่าวว่านี่เป็นการดำเนินการที่ซุ่มซ่ามอย่างยิ่ง ยังไม่ได้เพิ่มจำนวนคะแนนและจำนวนสถานการณ์ที่ยังไม่ได้รับการพิจารณา นอกจากนี้การเขียนรหัสนี้ซ้ำการเพิ่มประสิทธิภาพและการเพิ่มประสิทธิภาพ, noo ...