jquery插件-jQZoom

jQZoom 是一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，就是把鼠标移到小图上，旁边出现大图的局部放大的部分，如下图所示：


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    });
});

还不明白，那看这里的 。下载 jQZoom。