Fast jeder hat Erfahrung im Online -Einkaufen. Einige Websites haben eine Produktvergrößerungsfunktion. Wenn Sie die Maus auf das Bild bewegen, wird ein weiteres großes Bild daneben vorhanden, das dem Vergrößerungsglaseffekt entspricht. Wie kann ein solcher Effekt erreicht werden? Ich werde den Code an Sie senden. Bitte beachten Sie ihn.
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Vergrößerung von Glas </title> <style>*{Margin: 0; Padding: 0;} #Warp {width: 1184px; Höhe: 500px; 10px; Position: relativ;}#Warp #minbox {width: 350px; Höhe: 350px; float: links; Position: relativ;}#MaxBox {Breite: 400px; Höhe: 400px; Position: Absolute; links: 380px; Überlauf: Hidden; 800px; Position: absolut;}#con {float: links; Rand-Links: 20px;}#Meng {Breite: 175px; Höhe: 175px; Position: Absolut; Hintergrundfarbe; Gelb; Opazität: 0.4; Filter: alpha (opacity = 40); links: 0; id = "minbox"> <img src = "bilder/min.jpg"> <p id = "meng"> </p> </div> <div id = "maxbox"> <img Src = "Bilder/max.jpg"> </div> <div id = "con"> <img src = msg.png " minbox = document.getElementById ('minbox'); var meng = document.getElementById ('meng'); var maxbox = document.getElementById ('maxbox'); var maximg = maxbox.GetElementsByTagname ('img') [0]; var minimg = minbox.GetElementsByTagname ('IMG' [0]; OFL = 0, OFT = 0; while (obj) {Ofl+= obj.offsetleft+obj.clientleft; OFT+= Obj.offsettop+obj.clienttop; obj = obj.offsetParent;} return {links: OFL: OFT}; e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-offsettl (minbox) .left-meng.clientwidth/2; // x-Koordinate von Masken var niubi2 = e.clienty-offset (ming-masken). Koordinate der Maske var bili = maximg.clientwidth/minimg.clientwidth; if (niubi1 <= 0) {Niubi1 = 0;} else if (Niubi1> = minbox.clientwidth-Meng.clientwidth) {niubi1 = minbox.clientwidth-mengswidth; {niubi2 = 0;} else if (Niubi2> = minbox.clientHeight-meng.clientHeight) {Niubi2 = minbox.clientHeight-Meng.clientHeight;} console.log (Niubi1); console.log (Niubi2); Meng.Style.Left = Niubi1+'px'; meng.style.top = Niubi2+'px'; e.Left)*bili+'px'; maximg.style.top = -parseInt (Meng.style.top)*bili+'px';} minbox.onmouseout = function () {meng.style.display = 'none'; max.style.dislay = '};Die oben genannte Wirkung des Lupenglas der Einkaufswebsite basierend auf JavaScript, das Ihnen vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!