放大镜效果

<style>

    #d3{

        position: absolute;

        width: 400px;

        height: 400px;

        margin-left: -20px;

        margin-top: -10px;

        background-size:710px 710px;

        border:5px solid #c2c2c2;

        border-radius: 10px;

        background-color: #fff;

        z-index: 1000;

        display:none;

        background-repeat: no-repeat;

        box-shadow:0px 0px 10px 10px #ddd;

    }

</style>

<script>

    window.onload = function() {

        $(“#d3”).hide();

        if($(window).width()> 768){

            $(‘.product-img img’).mousemove(function(){

                img1= $(‘.product-img img’).attr(‘src’);

                var x=event.offsetX;

                var y=event.offsetY;

                var s=$(‘.product-img’).width();

                var s1=710/s;

                console.log(s1);

                console.log(x);

                console.log(y);

                if(x<=114){

                    x=114;

                }else if(x>=290){

                    x=290;

                }

                if(y<114){

                    y=114;

                }else if(y>290){

                    y=290;

                }

                $(“#d3”).show();

                $(“#d3”).css({‘background-image’:’url(‘+img1+’)’,’background-position’:((-x*s1)+200)+’px’+’ ‘+((-y*s1)+200)+’px’})

            })

            $(‘.product-img img’).mouseout(function(){

                $(“#d3”).hide();

            })

        }

    }

</script>