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