jQZoom是一个款基于jQuery库的图片放大插件，在页面中实现放大的方法是先准备两张一大一小的相同图片，在页面打开时展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom()方法绑定另外一张相同的大图片，在指定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。该插件非常适合在产品展示时使用。
jQZoom插件的使用：
（1）插件文件：
Js-8-7/jquery.jqzoom.js
Css-8-7/jquery.jqzoom.css
Images-8-7/全部图片
（2）下载地址：
http://www.mind-projects.it/projects/jqzoom/archives/jqzoom_evl1.0.1.zip
（3）功能描述：
在页面中放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边显示放大后的所选区域。
（4）实现代码：
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-7/jquery.jqzoom.js"></script>
<link rel="stylesheet" type="text/css" href="Css-8-7/jquery.jqzoom.css">
<style type="text/css">
...省略部分代码
</style>
<script type="text/javascript">
$(function(){
$("#jqzoom").jqzoom( //绑定图片放大插件jQZoom
{
zoomWidth: 230,
zoomHeight: 230
}
);
});
</script><div class="divFrame">
<div class="divTitle">
图片放大镜
</div>
<div class="divContent">
<a href="Images-8-7/bag.jpg" id="jqzoom" title="我的背包">
<img src="Images-8-7/bagsmall.jpg">
</a>
</div>
</div>（5）代码分析：
在页面中，为了实现图片放大的效果，除引用插件的JS文件外，还必须导入与之匹配CSS文件，因此在页面的头文件中加入如下代码：
<script type="text/javascript" src="Js-8-7/jquery.jqzoom.js"></script>
<link rel="stylesheet" type="text/css" href="Css-8-7/jquery.jqzoom.css">引用完JS和CSS文件后，接下来的工作就是将图片与插件绑定，为实现这一目的，首先在页面中增加一个<img>标记用于显示小图片，并将图片用一个<a>标记包裹起来；同时，将<a>标记的href属性设置为大图的URL，并将设置title属性，其代码如下：
<a href="Images-8-7/bag.jpg" id="jqzoom" title="我的背包">
<img src="Images-8-7/bagsmall.jpg">
</a>然后，在JS文件中通过插件的jqzoom()方法绑定对应的放大元素，其实现的代码如下：
$("#jqzoom").jqzoom( //绑定图片放大插件jQZoom
{
zoomWidth: 230, //小图片中所选区域的宽
zoomHeight: 230 //小图片中所选区域的高
}
);在插件调用的jqzoom([Option])方法中，可选项参数Option是一个对象，zoomWidth与zoomHeight属性外，还有如下常用属性：
$(element).jqzoom( //绑定图片放大插件jQZoom
{
zoomType: //放大镜类型，默认为"standard",如果设为"reverse"，在小图
//片中移动鼠标时，所选区域将高亮显示，非选中区域为淡灰色
xOffset: //放大后的图片与小图片间的x(横坐标)距离
yOffset: //放大后的图片与小图片间的y(纵坐标)距离
position: //放大后的图片相对原图的位置，默认为"right"，可设置为"left"，"top"，"bottom"
lens: //一个布尔值，表示是否显示小图片中的选择区域，默认值为"true"
//如果设为"false"，则放大后的图片上面不会出现主题字样
imageOpacity: //当zoomType的值为"reverse"时，用来设置非选中区域透
//明度的值，取值范围(0.0-1.0)
}
);