恩，最近了解到的一個放大鏡的做法，歡迎有人提出不足或者更好的寫法哦
樣式部分：
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> 呐，這就是我所了解的到的放大鏡的做法啦，不足的地方歡迎提出來哦。