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

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

                         jQuery----JQzoom图片放大器插件的使用_第1张图片

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

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

 

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

    

 

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

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

“photo”    </p

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

 

       

 

你可能感兴趣的:(jQuery)