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 demo 基本技巧
Dec 18 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
VUE脚手架具体使用方法
May 20 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
vue 使用localstorage实现面包屑的操作
Nov 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
表单内同名元素的控制
2006/11/22 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python输出带颜色字体实例方法
2019/09/01 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
献爱心标语
2014/06/21 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
手机被没收的检讨书
2014/10/04 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
SQL写法--行行比较
2021/08/23 SQL Server
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL