jQuery实现放大镜特效

效果图。

HTML页面中的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #fang{
 8                 position: absolute;
 9                 width: 100px;
10                 height: 100px;
11                 border-radius: 50px;
12                 background-color: cornflowerblue;
13                 display: none;
14             }
15         </style>
16     </head>
17     <body>
18         <div id="test1">
19             <img src="img/panda.jpg"width="800px"/>
20             <div id="fang">
21                 
22             </div>
23         </div>
24         <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
25         <script src="test_2.js" type="text/javascript" charset="utf-8"></script>
26     </body>
27 </html>

jQuery中的代码：

 1 $(function(){
 2     //获得图片离浏览器顶端的距离
 3     var top=$("#test1 img").position().top;
 4     //获得图片离浏览器左端的距离
 5     var left=$("#test1 img").position().left;
 6     //鼠标在图片内部移动
 7     $("#test1 img").mousemove(function(e){
 8         $("#fang").css({
 9             //此时鼠标的位置
10             "top":e.clientY+20+"px",
11             "left":e.clientX+20+"px",
12             //放大镜中的图片
13             "background-image":"url(img/panda.jpg)",
14             "background-size":"800px 450px",
15             "background-repeat":"no-repeat",
16             //调整放大镜中的图片的位置
17             "background-position":"-"+(e.clientX-left-51)+"px -"+(e.clientY-top-48)+"px",
18             //放大图片
19             "transform":"scale(1.5,1.5)"
20         });
21     });
22     //鼠标移进图片时显示放大镜
23     $("#test1 img").mouseenter(function(){
24         $("#fang").show();
25     });
26     //鼠标移出图片时隐藏放大镜
27     $("#test1 img").mouseout(function(){
28         $("#fang").hide();
29     });
30 });