放大镜

　　　　恩，最近了解到的一个放大镜的做法，欢迎有人提出不足或者更好的写法哦

　　　　样式部分：

 1 <style>
 2             *{
 3                 margin:0px;
 4                 padding:0px;
 5                 list-style:none;
 6             }
 7             .outer{
 8                 position:relative;
 9             }
10             .small{
11                 width:480px;
12                 height:300px;
13                 position:absolute;
14                 border:1px solid #CCC;
15             }
16             .big{
17                 position:absolute;
18                 left:500px;
19                 width:500px;
20                 height:340px;
21                 border:1px solid #CFC;
22                 overflow:hidden;
23                 display:none;
24             }
25             img{
26                 position:absolute;
27                 top:0px;
28                 left:0px;
29                 display:block;
30             }
31             .shade{
32                 position:absolute;
33                 z-index:999;
34                 top:0px;
35                 left:0px;
36                 width:120px;
37                 height:75px;
38                 background:url("images/4.png");
39                 display:none;
40             }
41         </style>

　　样式部分没有什么特殊的，只有一定要注意：蒙板的宽高与小图片的宽高的比例要与大框宽高与大图宽高的比例一致，即：

　　　　蒙版.width/小图.width=大框.width/大图.width

　　同理，高也是如此，以为后期的比例问题所以这个特别重要呦！

主体部分代码

 1 <body>
 2         <div class="outer">
 3             <div class="small">
 4                 <img src="images/2.jpg">
 5                 <div class="shade"></div>
 6             </div>
 7             <div class="big">
 8                 <img src="images/1.jpg">
 9             </div>
10         </div>
11     </body>
12     <script>
13         $(function(){
14             //把鼠标移入时，shade显示出来,把鼠标移出的时候shade隐藏 
15             $('.small').hover(function(){
16                     $('.shade').show();
17                     $('.big').show();
18             },function(){
19                     $('.shade').hide();
20                     $('.big').hide();
21             });
22             $('.small').mousemove(function(e){
23                 //三元运算符  解决兼容性问题
24                 e=event?event:window.event;
25                 
26                 //获取鼠标的坐标
27                 var x=e.pageX;
28                 var y=e.pageY;
29             
30                 //small距离视窗的距离
31                 var small_x=$('.small').offset().left;
32                 var small_y=$('.small').offset().top;
33                 
34                 //准备给shade赋值
35                 var  newleft=x-small_x-$('.shade').width()/2;
36                 var  newtop=y-small_y-$('.shade').height()/2;
37                 
38                 //判断shade的最大活动范围
39                 var max_left=$('.small').width()-$('.shade').width();   
40                 var max_top=$('.small').height()-$('.shade').height();  //使鼠标在蒙板中间
41                 
42                 if(newleft>=max_left){
43                     newleft=max_left;
44                 }
45                 if(newtop>=max_top){
46                     newtop=max_top;
47                 }
48                 
49                 if(newleft<=0){
50                     newleft=0;
51                 }
52                 if(newtop<=0){
53                     newtop=0;
54                 }
55                 
56                 //确定shade即蒙板的坐标
57                 $('.shade').css({
58                     top:newtop,
59                     left:newleft
60                 });
61                 
62                 //获取比值
63                 var bizhi_x=newleft/max_left;
64                 var bizhi_y=newtop/max_top;
65                 
66                 //获取大图片的位置
67                 var bigx=bizhi_x*($('.big>img').width()-$('.big').width());
68                 var bigy=bizhi_y*($('.big>img').height()-$('.big').height());
69                 
70                 $('.big>img').css({
71                     top:-bigy,
72                     left:-bigx
73                 });
74                 
75             });
76         });
77     </script>

　　呐，这就是我所了解的到的放大镜的做法啦，不足的地方欢迎提出来哦。