JavaScript-Imitation Taobao-Produktdetails Lupeneffekt-js-Tutorial-php.cn

JavaScript-Imitation Taobao-Produktdetails Lupeneffekt

小云云

Freigeben： 2018-03-15 16:36:51

Original

3059 Leute haben es durchsucht

Wenn wir Taobao oft besuchen und uns die Produktdetails ansehen, verwenden wir oft die Lupenfunktion von Produktbildern. Wenn ich darauf stoße, nutze ich sie im Grunde genommen das native js, um den folgenden Lupeneffekt zu erzielen.

Prinzip der Umsetzung:

Bereiten Sie ein großes Bild (klar) und ein kleines Bild vor. Die beiden Bilder müssen gleich sein, nur vergrößert oder verkleinert. Bewegen Sie die Maus in das kleine Miniaturbild hinein, werden die Zoom- und großen Bildfelder angezeigt, und wenn sich die Maus hinein bewegt, //Der Abstand von der Maus zur linken Seite des Visualisierungsfensters minus small Die halbe Breite der Bildmaskenebene ist der linke Wert von zomm. Auf die gleiche Weise kann der Wert von top ermittelt werden

zoom.style.left = event.clientX - zoom.offsetWidth /2 + "px" ;
zoom.style.top = event.clientY - zoom.offsetHeight/2 + „px“;

Dann dividiere die Größe von Wenn Sie das große Bild mit der Größe des kleinen Bildes vergleichen, können Sie das Vergrößerungsverhältnis der beiden Bilder ermitteln. Wenn Sie die Maus über das kleine Bild auf der linken Seite bewegen, können Sie über das Vergrößerungsverhältnis den Versatzwert des großen Bilds ermitteln Bild rechts nach links oder oben verschieben. Sie können die gewünschten Ergebnisse erzielen.

//Der linke Wert der kleinen Maskenebene links multipliziert mit dem Vergrößerungsfaktor zwischen den Bildern ist der linke Versatzwert des großen Bildes rechts. Das Gleiche gilt für oben

bigimg.style.left = „-“ + zoom.offsetLeft*scale + „px“;
bigimg.style.top = „-“ + zoom.offsetTop*scale + „ px“;

Gehe direkt zum Code:

HTML-Teil:

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

Nach dem Login kopieren

Javascript-Teil:

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

    }());

Nach dem Login kopieren

Verwandte Empfehlungen :

So erstellen Sie einen Lupeneffekt für JD-Produktdetails

JavaScript-Implementierung eines einfachen Lupeneffektcodes

JS-Implementierung eines Bildlupen-Plug-In-Beispiels Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonJavaScript-Imitation Taobao-Produktdetails Lupeneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!