图片放大镜效果【jQZoom-JQuery插件】

 

网上看到的，共享出来给大家

 jQZoom（目前最新v2.2版本）官方网在：http://www.mind-projects.it/blog/jqzoom_v10大家可以在这里看演示

也可以打这里下载 jQZoom v2.2：http://www.rayfile.com/files/a5ff0b4c-9dd6-11dd-b341-0019d11a795f/

使用方法

1.引用 jQZoom插件的样式：

 

XML/HTML代码

1. <link rel=“stylesheet” href=“你的路径/jqzoom.css” type=“text/css” media=“screen”>   

2.引用JQ脚本和jQZoom插件脚本：

 

XML/HTML代码

1. <script src=“你的路径/jquery.js” type=“text/javascript”></script>  
2. <script src=“你的路径/jquery.jqzoom.js” type=“text/javascript”></script>  

3.页面中要用放大镜的图片：

注意这里的样式是：class=”jqzoom”，还有大图的属性：jqimg=”images/shoe4_big.jpg”

XML/HTML代码

1. <p class=“jqzoom”><img src=“images/shoe4_small.jpg” alt=“shoe” jqimg=“images/shoe4_big.jpg” /></p>  

4.页面加载完成后执行

 

JavaScript代码

1. $(document).ready(function(){   
2. $(“.jqzoom”).jqueryzoom();   
3. });  

或者

 

JavaScript代码

1. $(document).ready(function(){   
2. $(“.jqzoom”).jqueryzoom({   
3. xzoom: 300, //放大的宽度(默认是200)   
4. yzoom: 300, //放大的高度度(默认是200)   
5. offset: 40, //zooming div default offset(default offset value is 10)   
6. position: “right”, //zooming div position(default position value is ”right”)   
7. preload:1 // by default preload of big images is 1   
8. lens:1 // by default the lens is 1   
9. });   
10. });  

http://www.css88.com/archives/597