淘宝放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding:0;}
        .lf{width: 300px;height: 300px;border: 1px solid gray;position: relative;}
        .lf>img{width: 100%;height: 100%;position: absolute;}
        .hover{width: 150px;height:150px;background: yellow;opacity: .5;position: absolute;display: none;}
        .rg{width: 400px;height: 400px;position: relative;top: -300px;left: 500px;border: 1px solid gray;overflow: hidden;}
    </style>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
</head>
<body>
    <div class="lf">
        <img src="images/max.jpg">
        <div class="hover"></div>
    </div>
    <div class="rg">
        <img src="images/max.jpg">
    </div>
    <script type="text/javascript">
        $(function(){
            //鼠标移动上去后hover显示
            $(".lf").on("mouseover",function(){
                $(".hover").show();
                $(".lf").on("mousemove",function(e){
                    var x=e.clientX-$(".lf").offset().left;
                    var y =e.clientY-$(".lf").offset().top;
                    //判断是否可以移动出去
                    if(x<=$(".hover").width()/2){
                        x=$(".hover").width()/2
                    }else if(x>=$(".lf").width()-$(".hover").width()/2){
                        x=$(".lf").width()-$(".hover").width()/2
                    }
                    if(y<=$(".hover").height()/2){
                        y=$(".hover").height()/2
                    }else if(y>=$(".lf").height()-$(".hover").height()/2){
                        y=$(".lf").height()-$(".hover").height()/2
                    }
                    $(".hover").css({
                        left:x-$(".hover").width()/2,
                        top:y-$(".hover").height()/2,
                    })
                    //hover距离容器的水平距离：此容器的宽度=rg里图片左上角开始的距离：图片的宽度
                    //注意：hover的大小：lf盒子的大小要和rg盒子的大小：图片真实的大小的比值是一样的，否则查看大图的时候会有误差
                    var lf=$(".rg>img").width()*(x-$(".hover").width()/2)/$(".lf").width();
                    var rg=$(".rg>img").height()*(y-$(".hover").height()/2)/$(".lf").height();
                    $(".rg").scrollLeft(lf);
                    $(".rg").scrollTop(rg);
                })
            })
            $(".lf").on("mouseout",function(){
                $(".hover").hide();
            })
        })
    </script>
</body>
</html>
注意：图片我用的是800*800的图片，所以盒子和图片的比例一定要注意！
posted @ 2017-06-01 20:02 火星黑洞阅读(212) 评论(0) 编辑收藏举报
刷新页面返回顶部