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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue选项卡切换登录方式小案例
Sep 27 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python模块结构与布局操作方法实例分析
2017/07/24 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
一份python入门应该看的学习资料
2018/04/11 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python读取yaml文件的详细教程
2020/07/21 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
cf收人广告词大全
2014/03/14 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL