1、Viewer.js点击按钮放大图片用法

<div onclick="getHideBig('hide_img_weight1')" id="btn_img_weight1">查看图片</div>
<img src="tibet-3.jpg" id="hide_img_weight1" style="display: none;"/><script type="text/javascript">// 隐藏图片放大预览function getHideBig(objId) {let imgUrl = $('#' + objId).attr('src');var image = new Image();image.src = imgUrl;var btnViewer = new Viewer(image, {hidden: function () {btnViewer.destroy();},});btnViewer.show();}
</script>

2、viewer 函数参数说明

viewer({ }) 方法除了实例中提到的url 和 title 参数之外，还可以配置其他参数，具体的属性参数如下：

inline 布尔值 false 是否启用inline模式
button 布尔值 true 是否显示右上角关闭按钮
navbar 布尔值 true 是否显示缩略图导航
title 布尔值 true 是否显示当前图片的标题
toolbar 布尔值 true 是否显示工具栏
tooltip 布尔值 true 是否显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 是否使用CSS3过度
fullsreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔，单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚轮滚动时缩放比例
minZoomRatio 浮点型 0.01（1%）最小缩放比例
maxZoomRatio 整型 100（10000%）最大缩放比例
zIndex 整型 2015 图片查看器modal模式时z-index值
zIndexInline 整型 0 图片查看器inline模式时z-index值
url 字符串/函数 src 设置查看图片时的图片地址来源
build 函数 null 回调函数，viewer.js文件加载完成后调用
built 函数 null 回调函数，viewer函数初始化之前调用（只调用一次）
show 函数 null 回调函数，加载展示图层前调用
shown 函数 null 回调函数，加载展示图层完成后调用
hide 函数 null 回调函数，点击关闭展示按钮时调用
hidden 函数 null 回调函数，展示图层关闭前调用
view 函数 null 回调函数，加载展示图片前调用
viewed 函数 null 回调函数，展示图片加载完成时调用

Viewer.js点击按钮放大图片用法相关推荐

js 点击按钮或者图片，实现图片上传以及将图片显示在页面上
点击图片本身,实现图片上传: 1.html页面 <div class="card">// 用于接受上传的图片<img src="img.jpg&quo ...
js 点击按钮或者图片，实现图片上传并显示在页面上
点击图片本身,实现图片上传: <div class="card">// 用于接受上传的图片<img src="img.jpg" alt=&qu ...
js中点击按钮切换图片
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
ImageButton点击按钮改变图片
一.ImageButton点击按钮改变图片 **************************ImageButton点击按钮改变图片有两种写法*************************** ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...

Viewer.js点击按钮放大图片用法

1、Viewer.js点击按钮放大图片用法

2、viewer 函数参数说明

Viewer.js点击按钮放大图片用法相关推荐

最新文章

热门文章