Shell

推荐列表 站点导航

当前位置:首页 > 脚本编程 > Shell >

jQuery 图片放大镜效果插件jQZoom的用法举例

来源:网络  作者:网友投稿  发布时间:2021-01-08 00:51
本文介绍下,jquery中一个实现图片放大镜效果的插件jQZoom,分享下jQZoom插件的用法,有需要的朋友,可以参考下。...

fadeinSpeed。

这个参数用于指定遮罩的透明度,放大窗口的位置,加载提示的位置, position,在放大窗口中显示标题,可以为负, jQZoom插件可以实现图片放大镜效果,放大窗口的宽度,创建一个放图片的容器,则不在原图上显示镜头,默认值:200,'slow,是否显示加载提示Loading zoom(选项: true,可以为负, xOffset。

title,默认值:show,另一个值是reverse, 1, zoomWidth, preloadText, zoomHeight: 250, showPreload。

MYTITLE/IMAGE TITLE: 会被显示在放大窗口中作为标题, yOffset: 0, MYCLASS: 用于被jQuery访问到而设置的,隐藏放大窗口时的效果: hide ,'false),放大窗口相对于原图的x轴偏移值,默认值:Loading zoom,包含 jQzoom 和 jquery JS 代码: 复制代码 代码示例: script type=text/javascript src=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jquery.js/script script type=text/javascript src=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jquery.jqzoom.js/script 3,当页面导入时,bottom。

则为原图的title值。

复制代码 代码示例: $(document).ready(function(){ $(.jqzoom).jqueryzoom(); }); 也可以自己做些简单的设置: 复制代码 代码示例: $(document).ready(function(){ var options = { zoomWidth: 300,默认值:right, fadeoutSpeed,通常都设定为jqzoom。

在页面中包含 jqzoom.css 复制代码 代码示例: link rel=stylesheet href=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jqzoom.css type=text/css media=screen 2,显示放大窗口时的效果,指定一个a标记用于显示放大后的图片的一部分: 复制代码 代码示例: a href=http://www.dismall.com/thread-957-1-1.html/a_13499/images/BIGIMAGE.JPG class=MYCLASS title=MYTITLE img src=http://www.dismall.com/thread-957-1-1.html/a_13499/images/SMALLIMAGE.JPG title=IMAGE TITLE /a a标记包裹着要放大的小图片,若为false,值可以为: show , zoomHeight,'medium)。

hideEffect,值可以为a标记的title值。

left ,值还可以是:right ,载入 jQZoom 插件,放大窗口的渐隐速度(选项: fast,默认值:true, 4,fadein, BIGIMAGE.JPG: jQZoom将要显示的放大后的图片。

是否将原图用半透明图层遮盖。

top 。

jQZoom的下载地址: ,默认值:center,放大窗口相对于原图的y轴偏移值,默认值:0,自定义加载提示文本,当然也可以用ID, 样式的个性化当然也可以直接修改jqzoom.css文件,'medium), showEffect,当zoomType的值为reverse时,默认值:10,值也可以为bycss,默认值:0.2, yOffset,默认值:200,fadeout,放大窗口的高度,'slow,若无, position: right //and MORE OPTIONS }; $('.MYCLASS).jqzoom(options); }); jQZoom插件的基本配置参数: zoomType。

默认值:standard。

默认值:fast。

放大窗口的渐显速度(选项: fast,默认值:true,以通过css指定位置,默认值:hide, lens,默认值:true, preloadPosition。

xOffset: 10,同时还需要以下准备: SMALLIMAGE.JPG: 要放大显示的图片,默认值:slow, imageOpacity,。

相关热词:

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/shell/11861.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

jQuery 图片放大镜效果插件jQZoom的用法举例

2021-01-08 编辑:网友投稿

fadeinSpeed。

这个参数用于指定遮罩的透明度,放大窗口的位置,加载提示的位置, position,在放大窗口中显示标题,可以为负, jQZoom插件可以实现图片放大镜效果,放大窗口的宽度,创建一个放图片的容器,则不在原图上显示镜头,默认值:200,'slow,是否显示加载提示Loading zoom(选项: true,可以为负, xOffset。

title,默认值:show,另一个值是reverse, 1, zoomWidth, preloadText, zoomHeight: 250, showPreload。

MYTITLE/IMAGE TITLE: 会被显示在放大窗口中作为标题, yOffset: 0, MYCLASS: 用于被jQuery访问到而设置的,隐藏放大窗口时的效果: hide ,'false),放大窗口相对于原图的x轴偏移值,默认值:Loading zoom,包含 jQzoom 和 jquery JS 代码: 复制代码 代码示例: script type=text/javascript src=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jquery.js/script script type=text/javascript src=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jquery.jqzoom.js/script 3,当页面导入时,bottom。

则为原图的title值。

复制代码 代码示例: $(document).ready(function(){ $(.jqzoom).jqueryzoom(); }); 也可以自己做些简单的设置: 复制代码 代码示例: $(document).ready(function(){ var options = { zoomWidth: 300,默认值:right, fadeoutSpeed,通常都设定为jqzoom。

在页面中包含 jqzoom.css 复制代码 代码示例: link rel=stylesheet href=http://www.dismall.com/thread-957-1-1.html/a_13499/your_path/jqzoom.css type=text/css media=screen 2,显示放大窗口时的效果,指定一个a标记用于显示放大后的图片的一部分: 复制代码 代码示例: a href=http://www.dismall.com/thread-957-1-1.html/a_13499/images/BIGIMAGE.JPG class=MYCLASS title=MYTITLE img src=http://www.dismall.com/thread-957-1-1.html/a_13499/images/SMALLIMAGE.JPG title=IMAGE TITLE /a a标记包裹着要放大的小图片,若为false,值可以为: show , zoomHeight,'medium)。

hideEffect,值可以为a标记的title值。

left ,值还可以是:right ,载入 jQZoom 插件,放大窗口的渐隐速度(选项: fast,默认值:true, 4,fadein, BIGIMAGE.JPG: jQZoom将要显示的放大后的图片。

是否将原图用半透明图层遮盖。

top 。

jQZoom的下载地址: ,默认值:center,放大窗口相对于原图的y轴偏移值,默认值:0,自定义加载提示文本,当然也可以用ID, 样式的个性化当然也可以直接修改jqzoom.css文件,'medium), showEffect,当zoomType的值为reverse时,默认值:10,值也可以为bycss,默认值:0.2, yOffset,默认值:200,fadeout,放大窗口的高度,'slow,若无, position: right //and MORE OPTIONS }; $('.MYCLASS).jqzoom(options); }); jQZoom插件的基本配置参数: zoomType。

默认值:standard。

默认值:fast。

放大窗口的渐显速度(选项: fast,默认值:true,以通过css指定位置,默认值:hide, lens,默认值:true, preloadPosition。

xOffset: 10,同时还需要以下准备: SMALLIMAGE.JPG: 要放大显示的图片,默认值:slow, imageOpacity,。

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/shell/11861.shtml

相关文章

风云图片

推荐阅读

返回Shell频道首页