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指定位置。