网页图片放大镜效果——jqzoom

前言：

jquery.jqzoom.js是一款实现图片放大镜效果的jquery包。他，简洁给力，代码易读，兼容良好——除了IE6下指向时光标会闪烁，其他效果优秀。整了个简单的demo出来，推荐一下这家伙。

正文：

1，话不多说，先上图。

2，用法说明。（不慌代码，随后有demo包）

A，导jquery包（1.2后的几个版本都行）；

B，导jquery.jqzoom.js，引jqzoom.css，拷zoomlens.gif（下载到jqzoom里面就有）；

<
link
 rel
="stylesheet"
 href
="style/jqzoom.css"
 type
="text/css"
 media
="screen"
 />

<
script
 type
="text/javascript"
 src
="js/jquery-1.4.4.min.js"
>

      
      script
><
script
 type
="text/javascript"
 src
="js/jquery.jqzoom.js"
>
       
       script
>

C，准备高清图big，开工具调小保存出一张页面展示用的小图small；

D，页面中写这么一行。

<
div
 class
="jqzoom"
><
img
 src
="images/[small]"
  alt
="scarpa"
  jqimg
="images/[big]"
>
     
     div
>

E，为类为.jqzoom的所有元素添加可缩放效果。

<
script
 type
="text/javascript"
>
   1:
  

    
    
   2:
 $(document).ready(function
(){

    
    
   3:
 $(".jqzoom"
).jqueryzoom({

    
    
   4:
                 xzoom: 250,

    
    
   5:
                 yzoom: 250,

    
    
   6:
                 offset: 10,

    
    
   7:
                 position: "right"
,

    
    
   8:
                 preload: 1

    
    
   9:
             });

    
    
  10:
 });

    
    
     
     script
>

 

 

F，收工调试。

资料：

•  

  • demo下载（等上转取好链接）