jq viewer 用法

最新推荐文章于 2024-09-13 21:54:03 发布

一个人走（IT）江湖

最新推荐文章于 2024-09-13 21:54:03 发布

阅读量2.7k

点赞数 2

分类专栏：前端开发文章标签： viewer jquery 图片查看

本文链接：https://blog.youkuaiyun.com/weixin_40427074/article/details/96870867

版权

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用jq Viewer插件创建图片查看器。提供了js和css的下载链接，通过引入相关文件并配置参数，可以实现图片的移动、缩放、旋转等功能。该插件还支持多种回调函数，如build、built、show等，以满足不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js和css 下载地址：百度网盘链接：https://pan.baidu.com/s/1uigA0EVOLptxHOl38O567A
提取码：vpmn
复制这段内容后打开百度网盘手机App，操作更方便哦
基本：引进js css
在这里插入图片描述
我使用的是： jquery 版本
代码示例：

  <div id="jqhtml" class="imgDiv">
	   <div class="tpSHow" dat1a-original="${GLOB_HOME}/filedbserver/imgfl/5af02fed-9a94-47f4-93d0-66293e79dbce">
	   <img style="width:100%;height:100%;" " src="${GLOB_HOME}/filedbserver/imgfl/5af02fed-9a94-47f4-93d0-66293e79dbce">
	   </div> 
	 </div>

js代码：使用id创建view对象

$(document).ready(function(){
	reloadWiewer();
});
var VIEW;
function reloadWiewer(){
	VIEW= $('#jqhtml').viewer({
			 url:    'dat1a-original',
		});
}

动态加载：需要杀死初始化的或者更新，对象.viewer(‘关键字’) 它内置属性函数等；例如：show，viewd，update，具体可查看一下源码
在这里插入图片描述

 var imghtml='<div class="tpSHow" dat1a-original="${GLOB_HOME}/filedbserver/imgfl/'+pid+'">'
            		 +'<img style="width:100%;height:100%;" " src="${GLOB_HOME}/filedbserver/imgfl/'+pid+'">'
            		 +'</div> ';
            	 $("#jqhtml").append(imghtml);
            	 //这里更新 viewer
            	 VIEW.viewer('update')

viewer.js将标签下的所有元素扩展了viewer()方法，可以通过传入配置参数的方式来进行配置；支持的配置项：

名称类型默认值说明
inline 布尔值 false 启用 inline 模式
button 布尔值 true 显示右上角关闭按钮（jQuery 版本无效）
navbar 布尔值/整型 true 显示缩略图导航
title 布尔值/整型 true 显示当前图片的标题（现实 alt 属性及图片尺寸）
toolbar 布尔值/整型 true 显示工具栏
tooltip 布尔值 true 显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 使用 CSS3 过度
fullscreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔，单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚动时的缩放比例
minZoomRatio 浮点型 0.01 最小缩放比例
maxZoomRatio 数字 100 最大缩放比例
zIndex 数字 2015 设置图片查看器 modal 模式时的 z-index
zIndexInline 数字 0 设置图片查看器 inline 模式时的 z-index
url 字符串/函数 src 设置大图片的 url
build 函数 null 回调函数，具体查看演示
built 函数 null 回调函数，具体查看演示
show 函数 null 回调函数，具体查看演示
shown 函数 null 回调函数，具体查看演示
hide 函数 null 回调函数，具体查看演示
hidden 函数 null 回调函数，具体查看演示
view 函数 null 回调函数，具体查看演示