viewer 图片点击放大 用法汇总
时间:2019-06-12
本文章向大家介绍viewer 图片点击放大 用法汇总,主要包括viewer 图片点击放大 用法汇总使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
不用viewer插件
1弹出框
https://www.cnblogs.com/web1/p/8989967.html
2表格中
https://www.jianshu.com/p/c17f4f62704c
3自己封装vue组件
https://www.cnblogs.com/yesyes/p/6689082.html
用viewer插件
总体用法:
http://www.dowebok.com/192.html
注意:JS 版本兼容 IE9+,jQuery 版本兼容 IE8+。
1、引入文件
JS 版本:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script>
jQuery 版本:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/jquery.min.js"></script> <script src="js/viewer.min.js"></script>
注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用,请到 github 上下载需要的版本。
2、HTML
<ul id="dowebok"> <li><img src="img/tibet-1.jpg" alt="图片1"></li> <li><img src="img/tibet-2.jpg" alt="图片2"></li> <li><img src="img/tibet-3.jpg" alt="图片3"></li> <li><img src="img/tibet-4.jpg" alt="图片4"></li> <li><img src="img/tibet-5.jpg" alt="图片5"></li> <li><img src="img/tibet-6.jpg" alt="图片6"></li> </ul>
3、JavaScript
JS 版本:
var viewer = new Viewer(document.getElementById('dowebok'));
jQuery 版本:
$('#dowebok').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 | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |
GitHub 地址:
方案二:在vscode中用法
链接:https://www.jianshu.com/p/c7e7c1550f42
第一步安装:
npm install v-viewer --save
第二步注册调用:
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
第三步注册:
Vue.use(Viewer);
Viewer.setDefaults({
Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});
第四部使用:
<viewer :images="tupians">
<i-col span="4" v-for="item in tupians">
<div class="detailed">
<img :src="item.img" alt="">
</div>
</i-col>
</viewer>
数据部分
tupians:[
{
img:tupian1,
},{
img:tupian2,
},{
img:tupian3,
}
],
其他使用方法可以在github上查看viewerjs
方案三: js用法
来源:https://blog.csdn.net/m0_37885651/article/details/81060806
View Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="js/viewer.css"/> <script src="js/viewer.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .img-list{ clear: both; } .img-list li{ width:200px; height: 200px; margin: 10px; float: left; } img{ width: 100px; height: 100px; display: block; } </style> </head> <body> <ul id="images1" class="img-list"> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> </ul> <!--二--> <ul id="image2" class="img-list"> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> </ul> </body> <script type="text/javascript"> window.onload = function(){ var viewer = new Viewer(document.getElementById('images1'), {}); // var viewer = new Viewer(document.getElementById('image2'), { url: 'data-imgurl' }); } </script> </html>
相似:https://blog.csdn.net/archer119/article/details/78390203
原文地址:https://www.cnblogs.com/hao-1234-1234/p/11011249.html
- cf------(round)#1 B. Spreadsheets(模拟)
- sysbench压测MyCAT的shell脚本
- qemu-kvm中vcpu虚拟化到底是咋整的?
- 【给 iOS 开发者】人工智能在 iOS 开发上的应用和机会
- 【Python】Selenium辅助海量基金数据获取
- Django ORM的简单总结
- GO语言标准库概览
- 关于自动化平台的动态菜单设计
- go语言网络编程之tcp
- 实现简单的http并发请求,支持:GET、POST、HEAD、PUT
- 【go语言】Goroutines 并发模式(一)
- 【go语言】Goroutines 并发模式(二)
- 从零开始搭建Nginx和Tomcat的web集群环境
- 【翻译】为什么 goroutine 的栈内存无穷大?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- k8s部署Kafka集群
- 彻底搞懂 etcd 系列文章(六):etcd 核心 API v3
- Open3d学习计划—7(RGBD测程法)
- 一次信息泄露引发的越权
- MySQL 调优 | OPTIMIZER_TRACE 详解
- 这次被坑惨了,MySQL的隐式转换导致了一个线上BUG
- iOS开发之UIMenu
- mysql必会技能-基本操作
- 移动端跨平台技术之下的变与不变
- java-JDBC操作Mysql
- 【深度知识】25种区块链共识算法全面详解
- 聊聊 resolv.conf 中 search 和 ndots 配置
- 数据库-实验二
- Rust Stable 1.45 中的 神奇 Bug 解读
- 快速提升Python数据分析能力的七个神奇方法