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

最新推荐文章于 2023-04-15 13:09:08 发布

weixin_34301132

最新推荐文章于 2023-04-15 13:09:08 发布

阅读量314

点赞数

原文链接：http://www.cnblogs.com/cj28-27/p/5573283.html

版权

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

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

这里把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>
显示效果如下：

感兴趣的小伙伴们，可以试试哟！！