程序地带

PC端使用viewer.js实现图片预览,放大,缩小,旋转等功能


GitHub地址:https://github.com/fengyuanchen/viewerjs 在线演示地址:https://fengyuanchen.github.io/viewerjs 在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>viewer图片预览</title>
<link rel="stylesheet" href="../../viewer.min.css" />
</head>
<style>
</style>
<body>
<div id='app'>
<div id="imgid" >
<img v-for="(item,index) in imglist" :key="index" :src="item" alt="" @click="previewimg">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="../../viewer.min.js"></script>
<script>
var Vue = new Vue({
el: '#app',
data: {
viewerid:null,
imglist:[
'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3942751454,1089199356&fm=26&gp=0.jpg',
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg'
]
},
created() {
},
methods: {
//预览图片
previewimg() {
let that = this
if (that.viewerid) { //判断是否已经实例 是则销毁 以免切换路由导致图片无法更新
that.viewerid.destroy(); //销毁方法
}
that.viewerid = new Viewer(document.getElementById('imgid'), { //实例化 imgid为包含图片的元素id
zIndex: 3000 //预览层的层级
});
},
}
})
</script>
</html>

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-indexzIndexInline数字0设置图片查看器 inline 模式时的 z-indexurl字符串/函数src设置大图片的 urlbuild函数null回调函数,具体查看演示built函数null回调函数,具体查看演示show函数null回调函数,具体查看演示shown函数null回调函数,具体查看演示hide函数null回调函数,具体查看演示hidden函数null回调函数,具体查看演示view函数null回调函数,具体查看演示viewed函数null回调函数,具体查看演示

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hu104160112/article/details/111246247

随机推荐

20210109LinuxProbe

是冒着泡的双倍开心语录要点总结笔记图片语录凡是过往,皆为序章。要点总结输入输出重定向命令<文件将文件作为命令的标准输入命令<<分界符从标准输入中读入,直到...

喜欢格子衫。 阅读(689)

LLDP技术原理

概念:LLDP(LinkLayerDiscoveryProtocol,链路层发现协议)提供了一种标准的链路层发现方式,可以将本端设...

格洛米爱学习 阅读(231)

爬虫课程设计(爬虫代码)

importbs4fromseleniumimportwebdriverimporttimeimportpymysqlimportcsvdefgetWebDriver(url):#进入浏览器设置opt...

CLMOON_ 阅读(714)

计算机操作系统课程期末考试复习文档

本篇摘自计算机操作系统课程复习文档,感谢文档的整理者,感谢操作系统老师,感谢发我文档的静姐,如有侵权之处,请联系删除。1、OS定义...

欢乐是不会消失的,海绵宝宝 阅读(519)

词典~2021.1.11

输入格式输入第一行是正整数N和M,后面是N行字典条目(最多10000条),然后是M行要翻译的外语单词(最多10000个)。每一个字...

fatfairyyy 阅读(707)

PHP EduCoder答案 PHP实现分页显示数据

PHP EduCoder答案 PHP实现分页显示数据

PHP语言之MySQL操作PHP实现分页显示数据任务描述<?php/***分页链接生成函数*$pageURL传递的page值*$max_page最大页码值*$show_page_num页面中显示...

谁道破愁须仗酒 阅读(429)

玩转Python的8个正确的基本姿态

玩转Python的8个正确的基本姿态

这样说吧:如果遵循了这8种超棒的Python编程实践,那么你就摸准了Python小机关,保证了顺利地做事的基本指导。前言当你正在开发的程序出现错误时ÿ...

Python_xiaobang 阅读(996)

2021.1.11初学C语言

2021.1.11学习的C语言C语言:#define_CRT_SECURE_NO_WARNINGS#include<stdio.h>//包含一个叫stdio.h的文件stdi...

wxfighting 阅读(783)