鼠標放在圖片上顯示圖片的放大鏡效果使用jqzoom實現，本例版本2.3
效果圖一
效果圖二
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQzoom 2 Demo</title>
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
<style type"text/css">
body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none; text-align:center;height:80px; line-height:80px; width:100px;overflow:hidden;}
ul#thumblist li a{display:block;border:1px solid #CCC;height:78px; line-height:78px; width:98px;overflow:hidden;}
ul#thumblist li a.zoomThumbActive{
border:1px solid red;height:78px; line-height:78px; width:98px;overflow:hidden;
}
ul#thumblist li img{ height:80px;}
.jqzoom{
text-decoration:none;
float:left;
}
</style>
<script type="text/javascript">
//使用方法
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'innerzoom',
lens:true,
preloadImages: true,
alwaysOn:false
});
});
</script>
</head>
<body>
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
<div class="clearfix">
<a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
<img src="imgProd/triumph_small1.jpg" title="triumph" style="border: 1px solid #666;">
</a>
</div>
<br/>
<div class="clearfix" >
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb31.jpg'></a></li>
</ul>
</div>
</div>
</body></html> 相關的參數設置（附上中文翻譯）
OPTION NAME DEFAULT DESCRIPTION
zoomType 'standard' The others admitted option values are 'reverse','drag','innerzoom'.
zoom模式，可選參數'reverse','drag','innerzoom'
zoomWidth 300 The popup window width showing the zoomed area.
彈出的div的寬
zoomHeight 300 The popup window height showing the zoomed area.
彈出的div的高
xOffset 10 The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")
彈出的div的x軸偏離，如果position屬性設爲right，則是距離右邊的距離。
yOffset 0 The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),
彈出的div的x軸偏離，同上。
position 'right' The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'
彈出的div的位置在左邊，在右邊，可選參數：'right' ,'left' ,'top' ,'bottom'。
preloadImages true if set to true,jqzoom will preload large images.
是否彈出大圖，如果爲true則彈出大圖。
preloadText 'Loading zoom' The text to show while preloading images.
當加載圖片時顯示的文字。
title true Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.
當地彈出div時在div的頂部顯示一個標題，如果沒有指定則取縮略圖的的標題
lens true if set to false,the small lens,over the image, won't show.
是否顯示小圖上的小div，如果設置爲false則在圖片上的div不顯示。
imageOpacity 0.4 Set the image opacity when the 'zoomType' option is set to 'reverse'.
圖片遮罩層的透明度，僅當'zoomType' 的模式爲'reverse'時起效。
showEffect 'show' The effect by which showing the popup window.Options available: 'show' ,'fadein'.
設置大圖彈出的方式，可選參數：'show' (顯示),'fadein'(淡入)。
hideEffect 'hide' The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.
設置大圖隱藏的方式，可選參數：'hide' (隱藏),'fadeout'(淡出)。
fadeinSpeed 'slow' Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number)
設置圖片彈出的速度，僅當showEffect設置爲fadein時有效，可選參數:'fast','slow',數字
fadeoutSpeed '2000' Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number)
設置圖片隱藏的速度，僅當showEffect設置爲fadeout時有效，可選參數:'fast','slow',數字
