技術標籤：jqueryhtml5css3

html程式碼：

<div class="container">
        <div class="box_left">
            <img src="image/02.jpg" alt="" class="im1">
            <div class="con">
                <img src="image/zoom_pup.png"
 
 alt="">
            </div>

            <div class="cover"></div>
        </div>

        <div class="box_right">
            <img src="image/02.jpg" alt="">
        </div>
    </div>

    <div class="
 
imgs">
        <div class="img1"><img src="image/O1CN01bYDjKZ1POdoY1IgQg_!!2228361831.jpg_430x430q90.jpg" alt=""></div>
        <div class="img2"><img src="image/O1CN01NbjZyu1POdoYumaXo_!!2228361831.jpg_430x430q90.jpg" alt="
 
"></div>
        <div class="img3"><img src="image/02.jpg" alt=""></div>
 </div>

css程式碼：

		*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            justify-content: space-between;
            display: flex;
            width: 1400px;
            height: 360px;
            border: 1px solid #ccc;
        }
        .im1 {
            width: 660px;
            height: 360px;

        }
        .con{
            width: 220px;
            height: 120px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .con img {
            width: 100%;
            height: 100%;

        }
        .cover {
            width: 660px;
            height: 360px;
            position: absolute;
            left: 0;
            top: 0;

        }
        .box_left {
            position: relative;
            width: 660px;
            height: 360px;
            background-color: yellow;
        }
        .box_right {
            overflow: hidden;
            position: relative;
            width: 660px;
            height: 360px;
            background-color: red;
        }
        .box_right img {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 1980px;
            height: 1080px;
        }
        .img1,.img2,.img3 {
            margin-left: 50px;
            width: 100px;
            height: 100px;

        }
        .img3 img {
            width: 100%;
            height: 100%;
        }
        .img1 img {
            width: 100%;
            height: 100%;
        }
        .img2 img {
            width: 100%;
            height: 100%;
        }
        .imgs {
            display: flex;
        }
        .selector {
            border: 3px solid red;
        }

js程式碼

var beishuX = ($(".box_right img").innerWidth()) / ($(".im1").innerWidth());
    var beishuY = ($(".box_right img").innerHeight()) / ($(".im1").innerHeight());

    console.log(beishuX,beishuY)
    $(".box_left").hover(function(){
        $(".box_right img").show();
        $(".con").show();
    },function(){
        $(".box_right img").hide();
        $(".con").hide();
    })

    $(".cover").mousemove(function(event){
        var x = event.offsetX - $(".con").innerWidth()/2;
        var y = event.offsetY - $(".con").innerHeight()/2;

        var w = $(".box_left").innerWidth() - $(".con").outerWidth();
        var h = $(".box_left").innerHeight() - $(".con").outerHeight();
        if(x <= 0){
            x = 0;
        }else if(x >= w){
            x = w;
        }

        if(y <= 0){
            y = 0;
        }else if(y >= h){
            y = h;
        }
        $(".con").css({
            left:x+"px",
            top:y+"px"
        })

        console.log($(".box_right img").css("left"));
        $(".box_right img").css({
            left:-beishuX * x + "px",
            top:-beishuY * y + "px"
        })
    })

    $(".imgs>div").hover(function(eve){
        $(this).addClass("selector");
        $(".im1").prop("src",eve.target.src);
        $(".box_right>img").prop("src",eve.target.src);

        // console.log($(".im1").prop("src"));
    },function(){
        $(this).removeClass("selector");
    })