JQzoom是一款基于JQUERY库的图片放大插件，在页面中实现放大的方法是先准备两张一大一小的相同图片，在页面打开时展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom()方法绑定另外一张相同的大图片，在制定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。该插件非常适合在产品展示时使用。 (1)插件文件 jquery.jqzoom.js/jquery.jqzoom.css 图片资源 (2)下载地址 (3)功能描述 在页面中放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边显示放大后的所选区域。 (4)实现代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQZoom放大镜插件title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> script> <script type="text/javascript" src="Jscript/jquery-1.4.2.js"> script> <script type="text/javascript" src="Js-7-7/jquery.jqzoom.js"> script> <link rel="stylesheet" type="text/css" href="Css-7-7/jquery.jqzoom.css" /> <style type="text/css"> body{font-size:13px} span{color:Red;font-size:12px} .divFrame{width:260px;border:solid 1px #666} .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold} .divFrame .divContent{padding:8px;line-height:1.6em} .divFrame .divContent img{border:1px solid #ccc} style> <script type="text/javascript"> $(function () { $("#jqzoom").jqzoom(
{
zoomWidth:230,
zoomHeight:230 }
);
}) script> head> <body> <div class="divFrame"> <div class="divTitle"> 图片放大镜 div> <div class="divContent"> <a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包"> <img src="Images-7-7/bagsmall.jpg" /> a> div> div> body> html>
(5)页面效果
<a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包"> <img src="Images-7-7/bagsmall.jpg" /> a>
然后，在JS文件中通过jqzoom()方法绑定对应的放大元素，其实现代码如下：
$(function () { $("#jqzoom").jqzoom(
{
zoomWidth:230,
zoomHeight:230 }
);
})
在插件调用的jqzoom（[option]）方法中，可选项参数Option是一个对象，除上述zoomWidth与zoomHeight属性外，还有如下的常用属性：
$(element).jqzoom()
{
zoomType: //放大镜类型，默认为"standard",如果设 为"reverse",在小图 //片移动鼠标时，所选区域将高亮显示，非选中区域为淡灰色 xOffset://放大后的图片与小图片间X距离 yOffset://放大后的图片与小图片间y距离 position://放大后的图片相对原图片的位置，默认为"right",可设置 为"left"/"top"/bottom lens: //一个布尔值，表示是否显示小图片中的选择区域，默认为true title: //一个布尔值，表示是否显示放大图片的主题，默认值为true imageOpacity: //当zoomType的值为"reverse"时，用来设置非选中区域透明度的值，取值范围(0.0-1.0) }
;
