最近在电子商务的web项目中，由于需要实现商品图片放大的效果，所以研究了一下JQzoom这个插件。JQzoom插件版本很多，而且还在不断升级中，不过使用方法和功能大同小异。jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大，使用简便。支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果。下面介绍一下我所使用的jQZoom（功能比较简单）的使用方法。效果如下：
1、首先，在使用所有的jQuery插件之前，都需要在你的页面中加入jQuery版本，然后是相应插件脚本（不要忘记这一点），以正确的顺序加入，如下面的代码：
<script type="text/javascript" src="js/jquery-1.3.1.js" ></script> //jQuery版本，其中js是你的路径
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>//插件脚本
2、然后将jqzoom.css添加到你页面的<head>中：
<link rel="stylesheet" href="css/jqzoom.css" type="text/css" />
3、这样子，准备工作就已经结束了，下面是如何在html中对指定的对象的使用方法：
注意这里的样式是：class=”jqzoom”，还有大图的属性：jqimg=”images/shoe4_big.jpg”
HTML代码
<div class=“jqzoom”><img src=“images/photo_small.jpg” alt=“photo”
jqimg=“images/poto_big.jpg” /></div>
4、页面写完后通过js去执行这个插件
/*使用jqzoom*/
$(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大图的宽度(默认是 200)
yzoom: 300, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload:1
});
});
jquery-1.3.1.js、jqzoom.js及jqzoom.css我已经上传的附件jqzoom.rar中。
我所使用的jqzoom功能比较简单，即能配置的参数比较少。目前使用较多的jqzoom版本高，功能更强，使用方法也差不多，我也在附件中上传了一个网上使用较多的示例拱大家学习使用。
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
