一直对图片缩放饶有兴趣的我今日一个很投机的机会研究了一把
参考官方网站：http://www.mind-projects.it/projects/jqzoom/index.php
参考demo文献：http://www.mind-projects.it/projects/jqzoom/index.php#examples网站下方download一栏
在官方文档下载的demo文献中，有详尽的例子，这里主要解释运用以及options(选项)的含义
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
zoomWidth: 300,
zoomHeight:450,
xOffset:90,
yOffset:30,
preloadImages: true,
alwaysOn:false
});
});
此处为引用正文
html如下：
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
<div class="clearfix">
<a href="../images/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
<img src="../images/triumph_small1.jpg" title="triumph" style="border: 4px 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: '../images/triumph_small1.jpg',largeimage: '../images/triumph_big1.jpg'}"><img src='../images/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small2.jpg',largeimage: '../images/triumph_big2.jpg'}"><img src='../images/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small3.jpg',largeimage: '../images/triumph_big3.jpg'}"><img src='../images/thumbs/triumph_thumb3.jpg'></a></li>
</ul>
</div>
</div>
此处官方文档有详尽资料，这里也是引用官方资料文献
属性含义如下：
zoomWidth，表示放大框的宽
zoomHeight ，表示放大框的高
xOffset,表示离显示展示中等图片的x距离
yOffset，表示离显示中等图片的Y距离
position,表示显示的放大框在浏览器的center，还是left,还是right
lens,表示显示在中等图片的缩放位置是否显示，默认为true
alwaysOn,表示放大框是否一直显示
本文转自蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366600，如需转载请自行联系原作者
