仿京东图片放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img{
            display: block;
        }
        .clearfix:after{
            content: '';
            display: block;
            height: 0;
            clear: both;
        }
        .small{
            width: 480px;
            height: 380px;
            /* background: red; */
            border: 1px solid gray;
            position: relative;
        }
        .small .shade{
            width: 200px;
            height: 200px;
            background: rgba(238, 235, 93, 0.5);
            position: absolute;
            top: 0;
            left: 0;
        }
        .small .shade.hide{
            display: none;
        }
        .small .shade:hover{
            cursor: crosshair;
        }
        .big{
            width: 600px;
            height: 600px;
            border: 1px solid gray;
            overflow: hidden;
            left: 2px;
        }
        .small, .big{
            float: left;
            position: relative;
        }
        .big.hide{
            display: none;
        }
        .big-img{
            position: absolute;
            top: 0;
            left: 0;
        }
        .content{
            position: relative;
        }
        .content .items{
            position: absolute;
            width: 480px;
        }
        .content .items li{
            float: left;
            margin: 18px 0 0 18px;
            border: 1px solid gray;
            opacity: 0.5;
        }
        .content .items li.active{
            border: 1px solid #42aefe;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="clearfix">
            <div class="small">
                <div class="shade hide"></div>
                <img class="small-img" src="./advanced_small1.png" alt="">
            </div>
            <div class="big hide">
                <img src="./advanced_big1.png" alt="" class="big-img">
            </div>
        </div>
        <ul class="items clearfix">
                <li class="active"><img src="./advanced1.png" alt=""></li>
                <li><img src="./advanced2.png" alt=""></li>
                <li><img src="./advanced3.png" alt=""></li>
                <li><img src="./advanced4.png" alt=""></li>
                <li><img src="./advanced5.png" alt=""></li>
                <li><img src="./advanced6.png" alt=""></li>
                <li><img src="./advanced7.png" alt=""></li>
                <li><img src="./advanced8.png" alt=""></li>
                <li><img src="./advanced9.png" alt=""></li>
            </ul>
    </div>
    <script>
        var x, y, shadeX, shadeY, bigX, bigY;
        $(function(){
            $('.items').css('top',$('.small').height()+$('.small').offset().top)
            $('.content .items li').each(function(index, elem){
                $(elem).click(function(){
                    $(this).addClass('active').siblings().removeClass('active')
                    $('.small-img').attr('src','./advanced_small'+Number(index+1)+'.png');
                    $('.big-img').attr('src','./advanced_big'+Number(index+1)+'.png');
                })
            })
            $('.small').mouseover(function(){
                //鼠标在small中的坐标
                x = event.clientX - $(this).offset().left;
                y = event.clientY - $(this).offset().top;
                console.log(event.clientX)
                console.log(x);
                console.log(y);
                $('.shade').removeClass('hide');
                $('.big').removeClass('hide');
            }).mousemove(function(){
                x = event.clientX - $(this).offset().left;
                y = event.clientY - $(this).offset().top + $('html').scrollTop();
                shadeX = Number(x-$('.shade').width()/2);
                shadeY = Number(y-$('.shade').height()/2);
                if(x <= 100){
                    shadeX = Number(100-$('.shade').width()/2);    
                }
                if(y <= 100){
                    shadeY = Number(100-$('.shade').height()/2);
                }
                if(x >= 380){
                    shadeX = Number(380-$('.shade').width()/2);
                }
                if(y >= 280){
                    shadeY = Number(280-$('.shade').height()/2);
                }
                bigX = -Number(shadeX * 2.4);
                bigY = -Number(shadeY * 2.3);
                console.log(x+":"+y)
                $('.shade').css('left', shadeX+"px")
                $('.shade').css('top', shadeY+"px")    
                $('.big-img').css('left',bigX+"px");
                $('.big-img').css('top',bigY+"px");
            }).mouseout(function(){
                $('.shade').addClass('hide');
                $('.big').addClass('hide');
            })

        })
    </script>
</body>
</html>
仿京东图片放大镜

猜你喜欢
