第10款插件:jqzoom放大镜效果插件

描述：将鼠标放置在图片的某一点上时可以在右侧单独显示此点附近放大的图像，用于需要局部放大功能的场合。

兼容浏览器：IE所有浏览器/Firefox/Google Chrome

官方链接： http://www.mind-projects.it/projects/jqzoom/

JS下载： http://ijquery.360sites.cn/js/jquery.jqzoom1.0.1.js

预览： http://ijquery.360sites.cn/demo/jqzoom

打包下载： http://ijquery.360sites.cn/demo/jqzoom/jqzoom.zip

参数说明： $('对象').jqzoom();

图片展示：

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.jqzoom1.0.1.js"></script>
   
3. <script>
   
4.         $(function () {
   
5.                 $('.jqzoom').jqzoom();
   
6.         });
   
7. </script>

复制代码

HTML代码：

1. <a href="images/big.jpg" class="jqzoom" style="" title="kawasaki">
   
2. <img src="images/small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
   
3. </a>

复制代码

CSS代码：

1. <link rel="stylesheet" type="text/css" href="http://ijquery.360sites.cn/js/jquery.jqzoom1.0.1.css" media="screen" />

复制代码

代码如下：

1. .jqzoom{
   
2. border:1px solid black;
   
3. float:left;
   
4. position:relative;
   
5. padding:0px;
   
6. cursor:pointer;
   
7. }
   
8. 
   
9. .jqzoom img{
   
10. float:left;
    
11. }
    
12. 
    
13. div.zoomdiv {
    
14. z-index                 : 100;
    
15. position                : absolute;
    
16. top:0px;
    
17. left:0px;
    
18. width                   : 200px;
    
19. height                  : 200px;
    
20. background: #ffffff;
    
21. border:1px solid #CCCCCC;
    
22. display:none;
    
23. text-align: center;
    
24. overflow: hidden;
    
25. }
    
26. 
    
27. div.jqZoomPup {
    
28. z-index                 : 10;
    
29. visibility              : hidden;
    
30. position                : absolute;
    
31. top:0px;
    
32. left:0px;
    
33. width                   : 50px;
    
34. height                  : 50px;
    
35. border: 1px solid #aaa;
    
36. background: #ffffff url(../images/zoom.gif) 50% top  no-repeat;;
    
37. opacity: 0.5;
    
38. -moz-opacity: 0.5;
    
39. -khtml-opacity: 0.5;
    
40. filter: alpha(Opacity=50);
    
41. }
    

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=10