Presque tout le monde a de l'expérience dans les achats en ligne. Certains sites Web ont une fonction de loupe de produits. Lorsque vous déplacez la souris vers l'image, il y aura une autre grande image à côté, ce qui équivaut à l'effet de loupe. Comment réaliser un tel effet? Je vous enverrai le code, veuillez y faire référence.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>magnifying glass</title><style>*{margin:0;padding: 0;}#warp{width: 1184px;height:500px;margin:50px auto 0;background-color: #ccc;overflow: hidden;padding: 10px; position: relative;} # warp #minbox {largeur: 350px; hauteur: 350px; float: gauche; position: relative;} # maxbox {width: 400px; height: 400px; position: absolu; gauche: 380px; overflow: Hidden; affichage: non;} # max img {largement: 800px; Absolute;} # con {float: gauche; marge-left: 20px;} # Meng {largeur: 175px; hauteur: 175px; position: Absolut; Background-Color: Yellow; Opacity: 0.4; filtre: alpha (Opacité = 40); gauche: 0; Top: 0; affichage: aucun;} </ style> </ad> id = "Minbox"> <img src = "images / min.jpg"> <p id = "Meng"> </p> </ div> <div id = "maxbox"> <img src = "images / max.jpg"> </ div> <div id = "con"> <img src = "images / msg.png"> </ div> minbox = document.getElementById ('Minbox'); var Meng = document.getElementById ('Meng'); var maxbox = document.getElementByid ('maxbox'); var maximg = maxbox.getElementsByTagName ('img') [0]; var minig = minefstetTTTT ° ouverte (obj); ofl = 0, oft = 0; while (obj) {ofl + = obj.offsetleft + obj.clientleft; oft + = obj.offsettop + obj.clienttop; obj = obj.offsetparent;} return {Left: ofl, top: oft};} minbox.onMouseMove = fonction (e) {var: e = e || window.event; Meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-offsettl (Minbox) .left-Meng.ClientWidth / 2; // x coordonnée de masque var niubi2 = e.clienty-oftl coordonnée du masque var bili = maximg.clientwidth / minimg.clientwidth; if (niubi1 <= 0) {niubi1 = 0;} else if (niubi1> = minbox.clientwidth-ming.clientwidth) {niubi1 = minbox.clientwidth-ming.clientwidth;} (ni2 <= 0). {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 = 'non'; maxbox.style.display = 'non';} </cript>Ce qui précède est l'effet de la loupe du site Web de magasinage basé sur JavaScript qui vous a été présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!