jQuery 图片放大镜效果插件jQZoom的用法举例
发布时间：2015-11-19 编辑：jiaochengji.com
本文介绍下，jquery中一个实现图片放大镜效果的插件jQZoom，分享下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>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>
3，创建一个放图片的容器，指定一个a标记用于显示放大后的图片的一部分：
复制代码 代码示例:
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>
a标记包裹着要放大的小图片，同时还需要以下准备：
SMALLIMAGE.JPG: 要放大显示的图片。
BIGIMAGE.JPG: jQZoom将要显示的放大后的图片。
MYCLASS: 用于被jQuery访问到而设置的，当然也可以用ID，通常都设定为jqzoom。
MYTITLE/IMAGE TITLE: 会被显示在放大窗口中作为标题。
BIGIMAGE.JPG: jQZoom将要显示的放大后的图片。
MYCLASS: 用于被jQuery访问到而设置的，当然也可以用ID，通常都设定为jqzoom。
MYTITLE/IMAGE TITLE: 会被显示在放大窗口中作为标题。
4，当页面导入时，载入 jQZoom 插件。
复制代码 代码示例:
$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });
也可以自己做些简单的设置：
复制代码 代码示例:
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
jQZoom插件的基本配置参数：
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指定位置。
样式的个性化当然也可以直接修改jqzoom.css文件。
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指定位置。
样式的个性化当然也可以直接修改jqzoom.css文件。
jQZoom的下载地址：
http://www.mind-projects.it/projects/jqzoom/
您可能感兴趣的文章：
jQuery 图片放大镜效果插件jQZoom的用法举例
jQuery的图片放大器插件 jQzoom
关于Jqzoom的使用心得 jquery放大镜效果插件
jquery 实现京东商城、凡客商城的图片放大效果
jQuery图片放大镜插件 magnifier
jQuery图片放大插件 hoverpluse
jquery插件珍藏(图片局部放大/信息提示框)
来自国外的14个图片放大编辑的jQuery插件整理
基于Jquery插件开发之图片放大镜效果(仿淘宝)
jQuery放大镜插件 AnythingZoomer
[关闭]