viewer.js实现图片预览功能


Posted in Javascript onJune 24, 2020

viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件:

1、css文件:viewer.css

2、js文件:viewer.js
可以在这里下载

下载后,在html中引入

<link rel="stylesheet" type="text/css" href="./viewer.css" />
<script src="./viewer.js" type="text/javascript" charset="utf-8"></script>

页面布局

html部分

<div id="imgBox">
 <div id="imgBoxItem" class="imglist1">
 <img src="image/img-1.jpg" data-imgurl="image/img-1.jpg">
 </div>
 <div id="imgBoxItem" class="imglist2">
 <img src="image/img-2.jpg" data-imgurl="image/img-2.jpg">
 </div>
 <div id="imgBoxItem" class="imglist3">
 <img src="image/img-3.jpg" data-imgurl="image/img-3.jpg">
 </div>
 <div id="imgBoxItem" class="imglist4">
 <img src="image/img-4.jpg" data-imgurl="image/img-4.jpg">
 </div>
</div>

CSS部分:

* {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 body {
 background-color: #f5f5f5;
 font-family: 'PingFang SC Regular', 'PingFang SC';
 width: 100%;
 min-width: 320px;
 max-width: 480px;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 text-shadow: none;
 position: absolute;
 box-sizing: content-box;
 word-break: break-all;

 }

 #imgBox {
 width: 92%;
 margin: 0 auto;
 margin-top: 10px;
 display: flex;
 flex-wrap: wrap;
 }

 #imgBoxItem {
 width: 48%;
 margin-left: 1%;
 margin-right: 1%;
 margin-top: 1%;
 height: 100px;
 }

 #imgBoxItem img {
 width: 100%;
 height: 100%;
 }

JS部分:

<script type="text/javascript">
 window.onload = function() {
 var viewer = new Viewer(document.getElementById('imgBox'), {
 url: 'data-imgurl'
 });
 }
</script>

效果:

预览前:

viewer.js实现图片预览功能

点击图片预览:

viewer.js实现图片预览功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
javascript event 事件解析
Jan 31 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
JS forEach跳出循环2种实现方法
Jun 24 #Javascript
js判断鼠标移入移出方向的方法
Jun 24 #Javascript
You might like
php 判断数组是几维数组
2013/03/20 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python多线程下信号处理程序示例
2019/05/31 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python 实现单通道转3通道
2019/12/03 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
入党介绍人意见2015
2015/06/01 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android