最近在电子商务的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版本高,功能更强,使用方法也差不多,我也在附件中上传了一个网上使用较多的示例拱大家学习使用。