Lorsque nous visitons souvent Taobao et regardons les détails des produits Taobao, nous utilisons souvent la fonction loupe des images de produits. Je n'ai jamais su comment la mettre en œuvre auparavant. Lorsque je le rencontre, je trouve essentiellement des modifications de code en ligne. le js natif pour obtenir l’effet de loupe suivant.
Principe de mise en œuvre :
Préparez une grande image (claire) et une petite image Les deux images doivent être identiques, juste agrandies ou réduites Déplacez la souris. dans la petite vignette Lorsque la souris est déplacée dans la petite image ci-dessus, les zones de zoom et de grande image sont affichées, puis lorsque la souris se déplace à l'intérieur, // La distance entre la souris et le côté gauche de la fenêtre de visualisation moins la. small La demi-largeur du calque de masque d'image est la valeur gauche de zomm De la même manière, la valeur de top peut être trouvée
zoom.style.left = event.clientX - zoom.offsetWidth. /2 + "px" ;
zoom.style.top = event.clientY - zoom.offsetHeight/2 + « px »;
Ensuite, divisez la taille de la grande image par la taille de la petite image, vous pouvez alors obtenir le rapport de grossissement des deux images. Lorsque la souris se déplace sur la petite image à gauche, grâce au rapport de grossissement, vous pouvez trouver la valeur de décalage de la grande. image de droite à gauche ou en haut. Vous pouvez obtenir les résultats souhaités.
//La valeur gauche du petit calque de masque à gauche multipliée par le facteur de grossissement entre les images est la valeur de décalage gauche de la grande image à droite. Il en va de même pour le haut
bigimg.style.left = "-" + zoom.offsetLeft*scale + "px";
bigimg.style.top = "-" + zoom.offsetTop*scale + " px”;
Aller directement au code :
partie html :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html><html lang= "en" ><head>
<meta charset= "UTF-8" >
<title>javascript防淘宝放大镜效果</title>
<style>
*{padding:0;margin:0;}
#box{margin:10px 0 0 10px;}
#box .smallbox{position:relative;height:327px;width:300px;}
#box .bigbox{display:none;position:absolute;left:310px;top:0;height:327px;width:300px;overflow:hidden;}
#box .bigbox img{position:relative;}
#box .zoom{display:none;position:absolute;height:100px;width:100px;background:#000;opacity:0.75;}
#box .item{margin-top:5px;font-size:0;}
#box .item img{height:70px;width:70px;margin-right:6px;}
</style></head><body>
<p class = "scale-img" id= "box" >
<p class = "wrapbox" >
<!--左边小图片-->
<p class = "smallbox" >
<!--放大镜小层-->
<p class = "zoom" ></p>
<img src= "s-1.png" class = "smallimg" >
<!--右边大图片-->
<p class = "bigbox" >
<img src= "b-1.png" class = "bigimg" >
</p>
</p>
<p class = "item" >
<img src= "s-1.png" date -num = "1" >
<img src= "s-2.png" date -num = "2" >
<img src= "s-3.png" date -num = "3" >
<img src= "s-4.png" date -num = "4" >
</p>
</p>
</p></body></html>
|
Copier après la connexion
partie javascript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | ( function (){
new Image().src = "b-1.png" ;
new Image().src = "b-2.png" ;
new Image().src = "b-3.png" ;
new Image().src = "b-4.png" ;
var smallbox = document.querySelector( "#box .smallbox" );
var bigbox = document.querySelector( "#box .bigbox" );
var smallimg = smallbox.querySelector( ".smallimg" );
var bigimg = bigbox.querySelector( ".bigimg" );
var zoom = document.querySelector( ".zoom" );
var itemImg = document.querySelectorAll( "#box .item img" );
for ( var i = 0, len = itemImg.length; i < len; i++){
( function (j){
itemImg[j].onmouseenter = function (){
var imgSrc = this.src;
smallimg.src = imgSrc;
bigimg.src = "b-" + (j+1) + ".png" ;
}
})(i);
}
smallbox.onmouseenter = function (event){
zoom.style.display = "block" ;
bigbox.style.display = "block" ;
var scale = bigimg.offsetWidth/smallimg.offsetWidth;
var ev = event || window.event;
this.onmousemove = function (event){
zoom.style.left = event.clientX - zoom.offsetWidth/2 + "px" ;
zoom.style.top = event.clientY - zoom.offsetHeight/2 + "px" ;
if (zoom.offsetLeft <= 0){
zoom.style.left = 0;
}
if (zoom.offsetTop <= 0){
zoom.style.top = 0;
}
if (zoom.offsetLeft >= smallbox.offsetWidth - zoom.offsetWidth){
zoom.style.left = smallbox.offsetWidth - zoom.offsetWidth + "px" ;
}
if (zoom.offsetTop >= smallbox.offsetHeight - zoom.offsetHeight){
zoom.style.top = smallbox.offsetHeight - zoom.offsetHeight + "px" ;
}
bigimg.style.left = "-" + zoom.offsetLeft*scale + "px" ;
bigimg.style.top = "-" + zoom.offsetTop*scale + "px" ;
}
}
smallbox.onmouseleave = function (){
bigbox.style.display = "none" ;
zoom.style.display = "none" ;
this.onmousemove = null;
}
}());
|
Copier après la connexion
Recommandations associées :
Comment créer un effet de loupe pour les détails du produit JD
Implémentation JavaScript d'un code d'effet de loupe simple
Implémentation JS d'un exemple de plug-in de loupe d'image Explication détaillée
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!