Heim > Artikel > Web-Frontend > Beispiel für JavaScript, das Taobao imitiert, um einen Lupeneffekt zu erzielen

Beispiel für JavaScript, das Taobao imitiert, um einen Lupeneffekt zu erzielen

黄舟Original: 2017-11-24 09:41:152496Durchsuche

Wir alle wissen, dass der Lupeneffekt in einigen Einkaufszentren allgemein verwendet wird. Zum Beispiel, wenn wir Taobao, Tmall und andere PC-Terminals öffnen, wenn wir die Artikel sehen, die uns gefallen, und darauf klicken Bild, Es hat die Wirkung einer Lupe. Wenn Sie das Prinzip nicht verstehen und analysieren, fühlt es sich sehr magisch an. Wenn Sie tatsächlich damit in Kontakt kommen, ist es auch sehr leicht zu verstehen. Im vorherigen Artikel haben wir auch ein Beispiel für die Implementierung einer Lupe vorgestellt. Heute stellen wir Ihnen die JavaScript-Imitation vor. Ein Beispiel dafür, wie Taobao den Lupeneffekt erzielt!

Wir unterteilen das gesamte Layout in drei Teile. Der erste Teil ist das kleine Bild des Themas, das in der oberen linken Ecke des gesamten Layouts platziert ist das kleine Bild; Der letzte Teil ist der Vergrößerungsglas-Anzeigeteil, positionieren Sie ihn rechts vom kleinen Bild.
Verwenden Sie dann js, um grundlegende Ereignisse hinzuzufügen (einschließlich Mausbewegung hinein und heraus usw.). Eine detaillierte interne Verwendung finden Sie im folgenden Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            list-style: none;
            padding: 0;
        }
        .zoom-box{
            width: 452px;
            position: relative;
        }
        .small-box{
            position: relative;
            border: 1px solid #ccc;
        }
        .small-box img{
            width: 100%;
            height: 100%;
        }
        .small-box .square{
            position: absolute;
            left: 0;
            top: 0;
            background: yellow;
            opacity: 0.5;
            /*display: none;*/
        }
        .small-box .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .img-list ul::after{
            clear: both;
            content: &#39;&#39;;
            display: table;
        }
        .img-list ul li{
            float: left;
            margin: 0 10px;
            padding: 6px;
        }
        .img-list img{
            border: 2px solid transparent;
        }
        .img-list img.active{
            border: 2px solid red;
        }
        .big-box{
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 2px;
            border: 1px solid #cccccc;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }
        .big-box img{
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
    <!-- 布局-->
    <div><!-- 容器-->
        <div><!-- 小图片容器-->
            <img src="../img/magnifier/m1.jpg" alt=""/>
            <div></div><!-- 鼠标选中框-->
            <div></div><!-- 鼠标悬浮位置-->
        </div>
        <div><!-- 图片列表-->
            <ul>
                <li><img src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg"
                         data-big="../img/magnifier/b1.jpg"/></li>
                <li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg"
                         data-big="../img/magnifier/b2.jpg"/></li>
                <li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg"
                         data-big="../img/magnifier/b3.jpg"/></li>
                <li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg"
                         data-big="../img/magnifier/b4.jpg"/></li>
                <li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg"
                         data-big="../img/magnifier/b5.jpg"/></li>
            </ul>
        </div>
        <div><!-- 放大镜-->
            <img src="../img/magnifier/b1.jpg" alt=""/>
        </div>
    </div>

    <script>
        //获取要操作的元素
        var smallbox = $(&#39;.small-box .mask&#39;);
        var smallimg = $(&#39;.small-box img&#39;);
        var square = $(&#39;.square&#39;);
        var bigbox = $(&#39;.big-box&#39;);
        var bigimg = $(&#39;.big-box img&#39;);
        var imgs = $all(&#39;.img-list img&#39;);

        //鼠标经过图片列表显示被选中，实现图片切换
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onmouseover = function(){
                for(var j = 0; j < imgs.length; j++){
                    imgs[j].className = &#39;&#39;;
                }
                this.className = &#39;active&#39;;

                //改变对应的图片链接
                smallimg.src = this.getAttribute(&#39;data-small&#39;);
                bigimg.src = this.getAttribute(&#39;data-big&#39;);
            };
        }

        //鼠标移入放大器显示并设置选中框的大小
        smallbox.onmouseover = function(){
            square.style.display = &#39;block&#39;;
            bigbox.style.display = &#39;block&#39;;
            //位置w/smallimg.w = bigbox.w/bigimg.w
            square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + &#39;px&#39;;
            square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + &#39;px&#39;;
        };
        //鼠标移出放大器隐藏
        smallbox.onmouseout = function(){
            square.style.display = &#39;none&#39;;
            bigbox.style.display = &#39;none&#39;;
        };

        //放大器移动
        //获取鼠标的位置
        smallbox.onmousemove = function(ev){
            var oEvent = ev || event;
            var x = oEvent.offsetX - square.offsetWidth/2;
            var y = oEvent.offsetY - square.offsetHeight/2;

            if(x < 0){
                x = 0;
            }
            if(x > smallbox.offsetWidth - square.offsetWidth){
                x = smallbox.offsetWidth - square.offsetWidth;
            }
            if(y < 0){
                y = 0;
            }
            if(y > smallbox.offsetHeight - square.offsetHeight){
                y = smallbox.offsetHeight - square.offsetHeight;
            }

            //给选中框定位
            square.style.left = x + &#39;px&#39;;
            square.style.top = y + &#39;px&#39;;

            //给放大器定位  x/? = smallimg.w/bigimg.w
            bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + &#39;px&#39;;
            bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + &#39;px&#39;;

        };

        //通过名称查找某个元素
        function $(name){
            return document.querySelector(name);
        }
        //通过名称查找相同的一组数据
        function $all(name){
            return document.querySelectorAll(name);
        }
    </script>
</body>
</html>

Zusammenfassung:

Der Lupeneffekt ist hier abgeschlossen. Ich glaube, dass meine Freunde ihr eigenes Verständnis dafür haben und ich hoffe, dass es für Ihre Arbeit hilfreich sein wird.

Verwandte Empfehlungen:

Ein Beispiel für JavaScript, das den Effekt einer Lupe implementiert

Detaillierte Erläuterung des Beispiels der Verwendung von CSS zur Erzielung des Bildlupeneffekts (Bild)

Native JS implementiert einen einfachen Lupeneffekt

Das obige ist der detaillierte Inhalt vonBeispiel für JavaScript, das Taobao imitiert, um einen Lupeneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für JavaScript, das den Effekt einer Lupe implementiertNächster Artikel：Beispiel für JavaScript, das den Effekt einer Lupe implementiert

In Verbindung stehende Artikel

Mehr sehen