前言:
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下载(等上转取好链接)
-