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 Panel常用方法
Oct 07 Javascript
深入理解javascript变量声明
Nov 20 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
详解React中setState回调函数
Jun 14 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
JavaScript实现随机点名小程序
Oct 29 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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP读取Excel类文件
2017/05/15 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python 深入理解yield
2008/09/06 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python函数中的可变长参数详解
2019/09/12 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python 读取串口数据的示例
2020/11/09 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
给客户的道歉信
2014/01/13 职场文书
小学安全教育材料
2014/02/17 职场文书
幼师自荐信范文
2015/03/06 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
七年级作文之英语老师
2019/10/28 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang