JavaScript imitation Taobao détails du produit effet loupe-js tutoriel-php.cn

JavaScript imitation Taobao détails du produit effet loupe

小云云

Libérer： 2018-03-15 16:36:51

original

3059 Les gens l'ont consulté

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 :

<!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 :

    (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");    //小图片box
        var bigbox = document.querySelector("#box .bigbox");    //大图片box
        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";
            //注意：offsetWdith的值是要元素为可视状态下才可以计算出来，不然当display:none的时候则为0；

            var scale = bigimg.offsetWidth/smallimg.offsetWidth;    //放大倍数
            var ev = event || window.event;


            //鼠标在内部移动的时候
            this.onmousemove = function(event){
                //鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值，同理可以求top的值
                zoom.style.left = event.clientX - zoom.offsetWidth/2 + "px";
                zoom.style.top = event.clientY - zoom.offsetHeight/2 + "px";

                //如果向左向上移动小于0，那么则设置left为0,实现紧贴着边框效果
                if(zoom.offsetLeft <= 0){
                    zoom.style.left = 0;
                }

                if(zoom.offsetTop <= 0){
                    zoom.style.top = 0;
                }

                //如果向右向下移动小于0，那么则设置top,实现紧贴着边框效果

                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";
                }

                //左边小遮罩层left的值乘以图片之间的放大倍数，则为右边大图片的left偏移值，top同理
                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!