网页图片放大镜效果——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下载（等上转取好链接）