JS （随着鼠标的移动，旁边显示放大图）

相信大家都知道，在淘宝，京东等购物网站中，商品的图片会随着鼠标的指示在旁边显示大图，在这里我就给大家分享一下这种效果的编码和实现；

实际上这种效果就是两张图片，一张大的图片和一张的小的图片，我这里是一张大的图片然后压缩之后获得小的图片；

这里把css代码和js代码均在，方便大家参考；

本人源代码拷贝：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 533px;
            height: 300px;//该尺寸是根据实际图片的大小来调整比例的；
            margin-right: 20px;
            float: left;
        }
        .div1{
            background-image: url("402.jpg");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <script src="../js/jQuery-2.2.2-min.js"></script>
    <script>
        $(".div1").on({
            "mousemove": function (event){
            var X=event.clientX;
            var Y=event.clientY;
            $(".div2").css({
                "background-image": "url('402.jpg')",
                "background-repeat": "no-repeat",
                "background-position":(30-X*3)+"px"+"  "+(30-Y*3)+"px"});
            },
            "mouseout": function (){
            $(".div2").css("background-image","");
            }
        });
    </script>
</body>
</html>
显示效果如下：

感兴趣的小伙伴们，可以试试哟！！
posted @ 2016-06-10 10:02  赤恩吉烨  阅读(682)  评论(0)  编辑  收藏  举报