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

   });

 });

配置参数

• zoomType，默认值：’standard’，另一个值是’reverse’，是否将原图用半透明图层遮盖。

• zoomWidth，默认值：200，放大窗口的宽度。

• zoomHeight，默认值：200，放大窗口的高度。

• xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。

• yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。

• position，默认值：’right’，放大窗口的位置，值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。

• lens，默认值：true，若为false，则不在原图上显示镜头。

• imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度。

• title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。

• showEffect，默认值：’show’，显示放大窗口时的效果，值可以为: ‘show’ ,’fadein’。

• hideEffect，默认值：’hide’，隐藏放大窗口时的效果: ‘hide’ ,’fadeout’。

• fadeinSpeed，默认值：’fast’，放大窗口的渐显速度(选项: ‘fast’,'slow’,'medium’)。

• fadeoutSpeed，默认值：’slow’，放大窗口的渐隐速度(选项: ‘fast’,'slow’,'medium’)。

• showPreload，默认值：true，是否显示加载提示Loading zoom(选项: ‘true’,'false’)。

• preloadText，默认值：’Loading zoom’，自定义加载提示文本。

• preloadPosition，默认值：’center’，加载提示的位置，值也可以为’bycss’，以通过css指定位置。