网上看到的，共享出来给大家
jQZoom（目前最新v2.2版本）官方网在：http://www.mind-projects.it/blog/jqzoom_v10大家可以在这里看演示
也可以打这里下载 jQZoom v2.2：
http://download.csdn.net/detail/wenjianbao/5020276
使用方法
1.引用 jQZoom插件的样式：
<link rel=“stylesheet” href=“你的路径/jqzoom.css” type=“text/css” media=“screen”>
2.引用JQ脚本和jQZoom插件脚本：
1 2 | <script src="你的路径/jquery.js" type="text/javascript"></script><script src="你的路径/jquery.jqzoom.js" type="text/javascript"></script> |
3.页面中要用放大镜的图片：
注意这里的样式是：class=”jqzoom”，还有大图的属性：jqimg=”images/shoe4_big.jpg”
1 | <p class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg" /></p> |
4.页面加载完成后执行
1 2 3 | $(document).ready(function(){ $(".jqzoom").jqueryzoom();}); |
或者
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function () { $(".jqzoom").jqueryzoom({ xzoom : 300, //放大的宽度(默认是200) yzoom : 300, //放大的高度度(默认是200) offset : 40, //zooming div default offset(default offset value is 10) position : "right", //zooming div position(default position value is "right") preload : 1 //by default preload of big images is 1 lens : 1 //by default the lens is 1 });}); |