ホームページ >ウェブフロントエンド >jsチュートリアル >タオバオを模倣して虫眼鏡効果を実現するJavaScriptの例

タオバオを模倣して虫眼鏡効果を実現するJavaScriptの例

黄舟オリジナル: 2017-11-24 09:41:152583ブラウズ

虫眼鏡効果は、一部のショッピングモールで一般的に使用されていることは誰もが知っています。たとえば、淘宝網、天猫、その他のPC端末を開いて、気に入った商品を見つけて画像をクリックすると、拡大鏡の効果が表示されます。ガラスが現れます。原理を理解して分析しないと、実際に触ってみるととても不思議な感じがしますが、前回の記事でも虫眼鏡を実装したJavaScriptの例を紹介しました。今日はJavaScriptの模倣を紹介します。淘宝網が虫眼鏡効果を実現する方法の一例です。

レイアウト全体を 3 つの部分に分割します。最初の部分はテーマの小さな画像で、レイアウト全体の左上隅に配置されます。2 番目の部分は、その小さな画像のすぐ下にある画像リストです。最後の部分は虫眼鏡の表示部分で、小さな画像の右側に配置します。

次に、js を使用して基本的なイベント (マウスの出入りなどの動きを含む) を追加します。詳細な内部使用については、次のコードを参照してください

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

概要:

虫眼鏡効果は次のとおりです。私の友人たちも同じように感じていると思います。私自身の理解と理解があなたの仕事に役立つことを願っています。

タオバオを模倣して虫眼鏡効果を実現するJavaScriptの例

関連記事