เกือบทุกคนมีประสบการณ์การช็อปปิ้งออนไลน์ บางเว็บไซต์มีฟังก์ชั่นแว่นขยายของผลิตภัณฑ์ เมื่อคุณเลื่อนเมาส์ไปที่ภาพจะมีภาพขนาดใหญ่อีกอันหนึ่งอยู่ข้างๆซึ่งเทียบเท่ากับเอฟเฟกต์แว่นขยาย ผลดังกล่าวจะเกิดขึ้นได้อย่างไร? ฉันจะส่งรหัสให้คุณโปรดดูที่มัน
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แว่นขยาย </title> <style>*{margin: 0; padding: 0;} #warp {width: 1184px; ความสูง: 500px; 10px; ตำแหน่ง: สัมพัทธ์;}#warp #minbox {width: 350px; ความสูง: 350px; float: ซ้าย; ตำแหน่ง: ญาติ;}#maxbox {ความกว้าง: 400px; ความสูง: 400px; ตำแหน่ง: Absolute; ซ้าย: 380px; Absolute;}#con {float: left; margin-left: 20px;}#meng {width: 175px; ความสูง: 175px; ตำแหน่ง: Absolute; พื้นหลัง-สี: สีเหลือง; opacity: 0.4; ตัวกรอง: Alpha (Opacity = 40); id = "minbox"> <img src = "images/min.jpg"> <p id = "meng"> </p> </div> <div id = "maxbox"> <img src = "images/max.jpg" minbox = document.getElementById ('minbox'); var meng = document.getElementById ('meng'); var maxbox = document.getElementById ('maxbox'); var maximg = maxbox.getElementSByTagname ('IMG') OFL = 0, OFT = 0; ในขณะที่ (OBJ) {OFL+= OBJ.OffSetLeft+OBJ.ClientLeft; Oft+= OBJ.OffSetTop+OBJ.ClientTop; obj = obj.offsetParent;} return {left: Ofl e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-offsettl (minbox) .left-meng.clientwidth/2; niubi2 = e.clienty-offsettl (minbox) .top-meng.clientheight/2; // y พิกัดของหน้ากาก var bili = maximg.clientwidth/minimg.clientwidth; ถ้า (niubi1 <= 0) {niubi1 = 0; {niubi1 = minbox.clientwidth-meng.clientwidth;} ถ้า (niubi2 <= 0) {niubi2 = 0;} อื่นถ้า (niubi2> = minbox.clientheight-meng.clientheigh) {niubi2 = minbox.clientheight-meng.clientheight;} console.log (niubi1); console.log (niubi2); meng.style.left = niubi1+'px'; E.Left)*bili+'px'; maximg.style.top = -parseint (meng.style.top)*bili+'px';} minbox.onmouseout = function () {meng.style.display = 'none'; maxbox.style.display = ';ข้างต้นคือผลกระทบของแว่นขยายของเว็บไซต์ช้อปปิ้งตาม JavaScript ที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!