当前位置: 编程技术>jquery
jQuery 图片放大镜效果插件jQZoom的用法举例
来源: 互联网 发布时间：2014-09-03
本文导语: jQZoom插件可以实现图片放大镜效果。 1，在页面中包含 jqzoom.css 代码示例: 2，包含 jQzoom 和 jQuery JS 代码： 代码示例: 3，创建一个放图片的容器，指定一个a标记用于显示放大后的图片的一部分： 代码示例: ...
jQZoom插件可以实现图片放大镜效果。
1，在页面中包含 jqzoom.css
代码示例:
2，包含 jQzoom 和 jQuery JS 代码：
代码示例:
3，创建一个放图片的容器，指定一个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/
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。