电商放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            border: 1px solid #000;
            width:1000px;
            margin: 100px;
            position: relative;
            padding:10px;
        }

        .box .left {
            width: 400px;     /*左边显示尺寸要和右边显示尺寸相同*/
            height: 400px;    /*左边显示尺寸要和右边显示尺寸相同*/
            position: relative;
            /* border: 4px solid #000; */
            overflow: hidden;
        }

        .box .left img {
            width: 100%;
            height: 100%;
        }

        .fangkuai {
            width: 200px;   /*显示尺寸要是两个大图片尺寸的一半*/
            height: 200px;  /*显示尺寸要是两个大图片尺寸的一半*/
            background-image: url(//img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
            position: absolute;
            top: 0;
            left: 0;
            display: none;/*隐藏*/


        }

        .box .right {
            width: 400px;   /*右边显示尺寸要和左边显示尺寸相同*/
            height: 400px;  /*右边显示尺寸要和左边显示尺寸相同*/
            overflow: hidden;
            /* border: 1px solid #000; */
            position: absolute;
            left: 450px;
            top: 10px;
            display: none;/*隐藏*/
        }

        .box .right img {
            /* width和height 可以是 400 的倍数 */
            width: 800px;
            height: 800px;
            position: absolute;
            left:0;
            top:0;
        }

        .left:hover {
            cursor: crosshair;
        }

        .thumb-content{
            height:60px;
            padding:5px;
        }

        .tb-thumb{
            height:60px;
            list-style-type:none;
        }
        .tb-thumb li{
            width:60px;
            height:100%;
            background:red;
            float: left;
            margin-right:5px;
            box-sizing:border-box;
            border:2px solid #fff;
        }
        .tb-thumb li img{
            width:100%;
            height:100%;
            background:red;
            float: left;
            margin-right:5px;
            box-sizing: border-box;
        }




    </style>

</head>
<body>
<div class="box">
    <div class="wrap">
        <div class="left">
            <img src="https://gd4.alicdn.com/imgextra/i2/2208031281/O1CN011LKjpoxpEzdSUdr_!!2208031281.jpg" alt="" class="leftImg">
            <div class="fangkuai"></div>
        </div>
        <div class="right">
            <img src="https://gd4.alicdn.com/imgextra/i2/2208031281/O1CN011LKjpoxpEzdSUdr_!!2208031281.jpg" alt="" class="rightImg">
        </div>
    </div>
    <div class="thumb-content">
        <ul class="tb-thumb">
            <li><img src="https://gd4.alicdn.com/imgextra/i2/2208031281/O1CN011LKjpoxpEzdSUdr_!!2208031281.jpg" alt=""></li>
            <li><img src="https://gd4.alicdn.com/imgextra/i4/2208031281/O1CN01I9bpvE1LKjpmar4yO_!!2208031281.jpg" alt=""></li>
            <li><img src="https://gd1.alicdn.com/imgextra/i1/2208031281/O1CN011LKjpeNkCsTCY0q_!!2208031281.jpg" alt=""></li>
            <li><img src="https://gd3.alicdn.com/imgextra/i3/2208031281/TB2fEuMXz2lJKJjSszcXXaopVXa_!!2208031281.jpg" alt=""></li>
            <li><img src="https://gd4.alicdn.com/imgextra/i4/2208031281/O1CN01DbKI8x1LKjpiaCoOO_!!2208031281.jpg" alt=""></li>
        </ul>
    </div>
</div>
　　
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var box = $(".box");
    var wrap = $(".wrap");
    var left = $(".left");
    var fangkuai = $(".fangkuai");
    var right = $(".right");
    var rightImg = $(".rightImg");


    var yemianLeft = left.offset().left;    //元素距离视口左侧的距离
    var yemianTop = left.offset().top;      //元素距离视口顶部的距离

    left.mousemove(function (e) {

        fangkuai.css({"display": "block"});  //方块显示
        right.css({"display": "block"});  //右侧显示

        //方块中心点坐标
        var eventX = e.pageX - yemianLeft;   //事件发生时距离元素当前元素顶部的距离(pageX 事件发生时的横坐标)
        var eventY = e.pageY - yemianTop;    //事件发生时距离元素当前元素左侧的距离(pageY 事件发生时的纵坐标)

        var fangkuaiW = fangkuai.width() / 2; //方块横向半径
        var fangkuaiH = fangkuai.width() / 2; //方块纵向半径

        var leftWidth = left.width(); //元素的总宽度
        var leftHeight = left.height(); //元素的总高度


        // eventX = 75 --> 225   eventY = 75 --> 225
        //这里是对方块中心点横坐标和纵坐标做一个溢出判断,
        if (eventX < fangkuaiW) {
            //在元素内的鼠标坐标小于 方块横向半径 ,那么方块的横坐标就为
            eventX = fangkuaiW;
        } else if (eventX >=  leftWidth - fangkuaiW) {
            eventX = leftWidth - fangkuaiW;
        }

        if (eventY < fangkuaiH) {
            eventY = fangkuaiH;
        } else if (eventY >= leftHeight - fangkuaiH) {
            eventY = leftHeight - fangkuaiH;
        }

        console.log(eventX);
        console.log(eventY);

        //当事件发生时,选择元素就跟随鼠标移动,移动的距离为鼠标的坐标(减去fangkuaiW是为了让鼠标在方块中心)
        fangkuai.css({"left": eventX - fangkuaiW, "top": eventY - fangkuaiH});  //网格方块的坐标


        //大图移动公式 大图片距离左边 = 小网格距离左边的距离  *  ((大图宽度/左侧图片)-1) * 2
        rightImg.css({"left": -((eventX-fangkuaiW) * ((rightImg.width()/leftWidth)-1)*2)});
        rightImg.css({"top": -((eventY-fangkuaiH) *  ((rightImg.height()/leftHeight)-1)*2)});

    });




    left.mouseout(function (e) {
        fangkuai.css({"display": "none"});  //方块隐藏
        right.css({"display": "none"});  //右侧隐藏
    })


    $(".tb-thumb li").hover(function(){
        $(this).css({"border":"2px solid black"}).siblings().css({"border":"2px solid #fff"});

        var imgSrc = $(this).children("img").attr("src");   //鼠标浮动到选中元素的图片的 src
        $(".leftImg").attr({"src": imgSrc});
        $(".rightImg").attr({"src": imgSrc});
    })
</script>

</body>
</html>
猜你喜欢
