jQZoom
2008年07月12日
jQZoom 是一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，就是把鼠标移到小图上，旁边出现大图的局部放大的部分，如下图所示：
jQZoom 效果，详细查看 jQZoom 演示。
下面介绍下简单使用：
1. 在你的页面中包含 jqzoom.css
<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">
2. 包含 jQzoom 和 jQuery JS 代码：
<script type="text/javascript" src="your_path/jquery.js"></script> <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>
3. 现在创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom，然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。
<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>
4. 当页面导入的时候，载入 jQZoom 插件。
$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });
好了基本设置好了，当然你也可以自己做些简单的设置：
$(document).ready(function(){ $(".jqzoom").jqueryzoom({ xzoom: 300, //设置放大 DIV 长度（默认为 200） yzoom: 300, //设置放大 DIV 高度（默认为 200） offset: 10, //设置放大 DIV 偏移（默认为 10） position: "right", //设置放大 DIV 的位置（默认为右边） preload:1, lens:1 }); });
7 条评论 添加你的评论 →
1. 二手科学家 | 2008:07:12 - 20:24:38 | #
好像是沙发？
有缓冲？
2. 杨林 | 2008:07:13 - 13:04:03 | #
我的意思是嫩可以做一个这个插件,在撰写文章的时候有快捷插入方式.
这个插件必然火热.
3. 锦瑟 | 2008:10:15 - 16:54:38 | #
不知为什么，照 着做，就是不显示大图片，不知是什么原因，头痛呀，博主遇到过吗？
4. Denis | 2008:10:15 - 20:00:37 | #
我没有问题！
5. jay | 2008:12:12 - 11:10:58 | #
为什么不能发表留言？？？？
6. jay | 2008:12:12 - 11:12:11 | #
晕，可以了，兄弟们，能不能把jQzoom发一份到我的邮箱啊，现在下载不了了。
bokix@163.com
7. maomao | 2009:03:05 - 15:30:38 | #
这样就可以了，大家试试
$(document).ready(function(){
$(“.jqzoom”).jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 20, //zooming div default offset(default offset value is 10)
position: “right”, //zooming div position(default position value is “right”)
preload:1,
lens:1
});
});