ホームページ > 記事 > ウェブフロントエンド > JavaScript 模倣淘宝網製品詳細虫眼鏡効果

JavaScript 模倣淘宝網製品詳細虫眼鏡効果

小云云オリジナル: 2018-03-15 16:36:512987ブラウズ

淘宝網にアクセスして商品写真の拡大鏡機能をよく使用しますが、これに遭遇すると、基本的にオンラインでコードの変更を見つけます。以下の虫眼鏡効果を実装します。

実装の原則:

大きい画像(クリア)と小さい画像を用意します。2つの画像は同じである必要があります。小さいサムネイルにマウスを移動すると、上の小さい画像が表示されます。対応する画像を表示します。マウスが上の小さな画像内に移動すると、ズームボックスと大きな画像ボックスが表示され、マウスがその中に移動すると、 // マウスから視覚化ウィンドウの左側までの距離を引いた値が表示されます。小さいピクチャマスクレイヤーの幅の半分がzommの左側になります。同様に、topの値を見つけることができます

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

次に、大きい画像のサイズを小さい画像のサイズで割ると、画像の拡大率が得られます。 2 つの画像を表示し、左側の小さい画像上でマウスを移動すると、拡大率によって、右側の大きい画像を左または上にオフセットする値がわかります。望む結果を得ることができます。

//左側の小さなマスクレイヤーの左の値に画像間の拡大率を掛けたものが、右側の大きな画像の左オフセット値になります

bigimg.style.left = 「-」+zoom.offsetLeft*scale +「px」;
bigimg.style.top =「-」+zoom.offsetTop*scale +「px」;

コードに直接移動します:

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>

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

    }());

JavaScript 模倣淘宝網製品詳細虫眼鏡効果

関連記事