มักจะมีพื้นที่แสดงผลผลิตภัณฑ์ในหน้าผลิตภัณฑ์ของเว็บไซต์ช้อปปิ้ง ฟังก์ชั่นหนึ่งในพื้นที่ภาพนี้คือฟังก์ชั่นการขยายของรูปภาพผลิตภัณฑ์ ย้ายพื้นที่โฟกัสทางด้านซ้ายเพื่อขยายรายละเอียดและดูรายละเอียด รายละเอียดมีดังนี้ วิธีการใช้ฟังก์ชั่นนี้ก็ง่ายมาก
การทดลอง: ทำให้ภาพที่ขยายของโฟกัสผลิตภัณฑ์
ทักษะที่จำเป็น:
1. วิธีการพื้นฐานในการรับองค์ประกอบหน้า;
2. เหตุการณ์ง่ายๆสองสามเหตุการณ์
3. คุณจะใช้ DOM เพื่อตั้งค่าแอตทริบิวต์ขององค์ประกอบ
หลักการกรณี:
1. ติดตามเหตุการณ์เมาส์ของกล่องโฟกัส;
2. กฎระเบียบเกี่ยวกับพื้นที่เคลื่อนที่ของกล่องโฟกัส;
3. แสดงเนื้อหาของกล่องขนาดใหญ่
เหมาะสำหรับ: ผู้เริ่มต้น JS
-------------------------------------------------------------------เริ่ม! -
1. ก่อนอื่นเราเตรียมสไตล์ CSS หลายจุดที่ต้องให้ความสนใจในสไตล์ CSS คือ:
(1) แผนที่โฟกัสนั้นสัมพันธ์กับตำแหน่งการแสดงผลเริ่มต้น: ไม่มี;
(2) กล่องแสดงภาพขนาดใหญ่ทางด้านขวา (ต่อไปนี้จะเรียกว่าเฟรมภาพขนาดใหญ่) แสดงผลเริ่มต้น: ไม่มี; เนื้อหาในกรอบภาพขนาดใหญ่จะต้องซ่อนอยู่หลังจากล้น: ซ่อน;
2. เริ่มเขียนรหัสสคริปต์:
(1) ก่อนอื่นรับองค์ประกอบหน้า:
// ก่อนอื่นทั้งหมดฟังก์ชันองค์ประกอบ getId (TAG) ที่จะทำงาน {// กำหนดวิธีการที่จะได้รับองค์ประกอบด้วย ID ซึ่งจะช่วยลดปริมาณงานจำนวนมาก! ส่งคืน document.getElementById (แท็ก)} var box = getId ("box"); var small = getId ("เล็ก"); var mask = getId ("หน้ากาก"); var big = getId ("ใหญ่"); var pic = ใหญ่เด็ก [0]; // นี่คือการรับองค์ประกอบผ่านวิธีโหนด(2) ตรวจสอบให้แน่ใจว่ามีสองเหตุการณ์จะปรากฏขึ้นเมื่อเมาส์เคลื่อนที่ไปยังภาพเล็ก ๆ : 1) ควรแสดงกล่องโฟกัส 2) ควรแสดงกล่องรูปภาพขนาดใหญ่ ในทำนองเดียวกันหลังจากที่เมาส์ถูกลบออกใบทั้งสองนี้จะต้องถูกยกเลิก
// เอฟเฟกต์สองเอฟเฟกต์ปรากฏขึ้นเมื่อย้ายเมาส์ไปยังรูปภาพขนาดเล็ก onmouseover = function () {mask.style.display = "block"; big.style.display = "block"; } small.onMouseOut = function () {mask.style.display = "ไม่มี"; big.style.display = "ไม่มี"}(3) ตั้งค่าต่อไปนี้ของกล่องโฟกัส:
1) เมื่อมีการตั้งค่ากล่องโฟกัสเวลาติดตามของเราคือความจริงดังนั้นประเภทเหตุการณ์ที่นี่จึงไม่ใช่ OnMouseOver; แต่ Onmousemove;
2) ปัญหาที่เกี่ยวข้องในรหัสนี้ส่วนใหญ่เป็นปัญหาการคำนวณตำแหน่งหน้ากาก (กล่องโฟกัส) ปัญหาที่ง่ายต่อการเพิกเฉยคือตำแหน่งที่หน้ากากเคลื่อนไหว? ในสไตล์ CSS ของฉันหน้ากากจะถูกวางไว้ในกล่องเล็ก ๆ ดังนั้นตำแหน่งการเคลื่อนที่ของสัมพัทธ์จะต้องเป็นตำแหน่งขององค์ประกอบหลักขนาดเล็กที่อยู่ในตำแหน่ง ดังนั้นตำแหน่งพิกัดที่ฉันได้รับจากไคลเอนต์และลูกค้าที่สัมพันธ์กับหน้าต่างปัจจุบันของเบราว์เซอร์ไม่สามารถใช้โดยตรงและอิทธิพลของค่ามาร์จิ้นของกล่องแม่ต้องถูกลบออก
// ตั้งกล่องโฟกัสของภาพขนาดเล็กและติดตามเมาส์ small.onmousemove = function (e) {var marginl = box.offsetleft; // ใช้วิธี Offsetleft เพื่อรับส่วนขอบซ้ายของกล่อง var margint = box.offSettop; // ใช้วิธี Offsettop เพื่อให้ได้มาร์จิ้นด้านบนของกล่อง var currentx = e.clientx; var currenty = e.clienty; // ใช้ e.clinety และ e.clinety เทียบกับมุมซ้ายบนของเบราว์เซอร์ var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offSetheight/2; // ในการจัดตำแหน่งกึ่งกลางของกล่องโฟกัสกับเมาส์คุณต้องลบครึ่งหนึ่งของความกว้างและความสูงของโฟกัส กล่อง/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -(4) การเคลื่อนไหวของตำแหน่งของกล่องโฟกัสที่ไม่ได้ใช้งาน
1) หลังจากขั้นตอนก่อนหน้าเสร็จสิ้นการเคลื่อนไหวของกล่องโฟกัสจะไม่ได้ใช้งาน ในระหว่างกระบวนการเรียกดูเว็บไซต์ช้อปปิ้งเราสามารถรู้สึกได้อย่างชัดเจนว่ากล่องโฟกัสไม่อนุญาตให้มีการเคลื่อนไหวนอกภาพขนาดเล็กทำให้เกิดประสบการณ์การใช้งานที่ไม่ดี
2) เพื่อ จำกัด การเคลื่อนไหวของกล่องโฟกัสส่วนใหญ่เมื่อการเปลี่ยนแปลง X และ Y เกินค่าที่อนุญาตให้มีค่าคงที่
// ตั้งกล่องโฟกัสของภาพขนาดเล็กและติดตามเมาส์ small.onmousemove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offSetheight/2; // ตั้งค่าพื้นที่เคลื่อนที่สำหรับกล่องโฟกัสถ้า (x <0) {x = 0;} ถ้า (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; // ค่าต่ำสุดของ x ที่ใช้สำหรับการวางตำแหน่งคือ 0 และค่าสูงสุดคือความยาวของแกน y-mask ขนาดเล็ก เช่นเดียวกันสำหรับ y-axis ถ้า (y <0) {y = 0;} ถ้า (y> small.offSetheight-mask.offSetheight) {y = small.offSetheight-mask.offSetheight}; mask.style.left = x+"px"; // โปรดทราบว่าพื้นที่เคลื่อนที่ถูกเขียนหลังจากระบุพื้นที่การเคลื่อนไหวและให้ความสนใจกับลำดับการดำเนินการของรหัส Mask.style.top = y+"px";(5) ตั้งค่าการแสดงภาพขนาดใหญ่
1) เพื่อตระหนักถึงการเคลื่อนไหวของภาพในกล่องใหญ่คุณควรนึกถึงค่า -margin;
2) คุณสามารถเคลื่อนย้ายระยะทางได้เท่าไหร่ในการคูณค่าซ้ายและด้านบนของหน้ากากด้วยสัดส่วนคงที่ ลองนึกถึงตำแหน่งที่แสดงในมุมซ้ายบนของพื้นที่โฟกัสและมุมซ้ายบนของกรอบภาพขนาดใหญ่เหมือนกัน! - - นี่ไม่ใช่เรื่องยากที่จะเข้าใจ
// ตั้งค่าเนื้อหาที่แสดงในกล่องขนาดใหญ่ var relativex = mask.offsetleft; var relationy = mask.offSettop; var proporationx = pic.offsetWidth/small.offsetWidth; // ตั้งค่าอัตราส่วน var proporationy = pic.offSetheight/Small.OffsetWidth; pic.style.marginleft = -relativex*proporationx+"px"; //บันทึก! ค่าของมาร์จิ้นจะต้องเป็นลบ "px อย่าทิ้ง pic.style.margintop = -Relativey*proporationy+" px ";
ณ จุดนี้การสาธิตของเราเสร็จสิ้นแล้ว! ไม่ใช่เรื่องง่ายมาก
ฉันจะวางรหัสทั้งหมดด้านล่างหวังที่จะพูดคุยและสื่อสารกับคุณ
นี่คือรหัส CSS
<style> * {มาร์จิ้น: 0; Padding: 0; } #box {margin: 50px; } #SMALL {WIDTH: 229PX; ความสูง: 250px; ชายแดน: 1px Solid Black; TEXT-ALIGN: CENTER; ตำแหน่ง: ญาติ; ลอย: ซ้าย; } #mask {width: 100px; ความสูง: 100px; พื้นหลังสี: RGBA (214, 111, 193, 0.3); ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; /*display: none;*/} #big {width: 350px; ความสูง: 350px; ชายแดน: 1px Solid Black; ลอย: ซ้าย; ล้น: ซ่อน; /*display: none;*/} </style>นี่คือ html
<body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </div> </div> <div id = "big"> <img src = "big_img.jpg"
นี่คือรหัส JS
<script> // ก่อนอื่นองค์ประกอบที่จะดำเนินการฟังก์ชั่น getId (แท็ก) {return document.getElementById (แท็ก)} var box = getId ("box"); var small = getId ("เล็ก"); var mask = getId ("หน้ากาก"); var big = getId ("ใหญ่"); var pic = ใหญ่เด็ก [0]; console.log (pic); // เมาส์เคลื่อนไปยังรูปภาพและเอฟเฟกต์สองเอฟเฟกต์จะเล็ก onMouseOver = function () {mask.style.display = "block"; big.style.display = "block"; } small.onMouseOut = function () {mask.style.display = "ไม่มี"; big.style.display = "ไม่มี"} // ตั้งกล่องโฟกัสของภาพขนาดเล็กและติดตามเมาส์; small.onmousemove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetWidth/2; var y = currenty-margint-mask.offSetheight/2; // ตั้งค่าพื้นที่เคลื่อนที่สำหรับกล่องโฟกัสถ้า (x <0) {x = 0;} ถ้า (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; if (y <0) {y = 0;} if (y> small.offSetheight-mask.offSetheight) {y = small.offSetheight-mask.offSetheight}; mask.style.left = x+"px"; mask.style.top = y+"px"; // ตั้งค่าเนื้อหาที่แสดงในกล่องขนาดใหญ่ var relativex = mask.offsetleft; var relationy = mask.offSettop; var relationy = mask.offSettop; var proporationx = pic.offsetWidth/small.offsetWidth; var proporationy = pic.offSetheight/small.OffSetWidth; pic.style.marginleft = -relativex*proporationx+"px"; pic.style.margintop = -Relativey*proporationy+"px"; } </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น