jQuery----JQzoom图片放大器插件的使用

     最近在电子商务的web项目中，由于需要实现商品图片放大的效果，所以研究了一下JQzoom这个插件。JQzoom插件版本很多，而且还在不断升级中，不过使用方法和功能大同小异。jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大，使用简便。支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果。下面介绍一下我所使用的jQZoom（功能比较简单）的使用方法。效果如下：

                        

1、首先，在使用所有的jQuery插件之前，都需要在你的页面中加入jQuery版本，然后是相应插件脚本（不要忘记这一点），以正确的顺序加入，如下面的代码：

     //jQuery版本，其中js是你的路径
     //插件脚本

 

2、然后将jqzoom.css添加到你页面的中：

    

 

3、这样子，准备工作就已经结束了，下面是如何在html中对指定的对象的使用方法：

     注意这里的样式是：class=”jqzoom”，还有大图的属性：jqimg=”images/shoe4_big.jpg”
     HTML代码
         

           jqimg=“images/poto_big.jpg” />

 

 

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