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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python简单猜数游戏实例
2015/07/09 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
岳麓书院导游词
2015/02/03 职场文书
环境卫生整治简报
2015/07/20 职场文书
初三语文教学反思
2016/03/03 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL