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获取当前日期时间及其它操作函数
Jan 11 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
JavaScript随机数的组合问题案例分析
May 16 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
英雄儿女观后感
2015/06/09 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
python字典的元素访问实例详解
2021/07/21 Python
Python实现Hash算法
2022/03/18 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL