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实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jquery validation验证表单插件
Jan 07 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JavaScript继承与多继承实例分析
May 26 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 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
How do I change MySQL timezone?
2008/03/26 PHP
几个php应用技巧
2008/03/27 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Python生成随机密码
2015/03/10 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
详解Python编程中time模块的使用
2015/11/20 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
学校万圣节活动方案
2014/02/13 职场文书
大跃进口号
2014/06/16 职场文书
民政工作个人总结
2015/02/28 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
青春雷锋观后感
2015/06/10 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python如何进行基准测试
2021/04/26 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js