css前沿图片预览,viewer.js实现图片预览功能

viewer.js是实现图片预览的插件库，要在项目中使用它里面的功能，首先要引入两个文件：

1、css文件:viewer.css

2、js文件:viewer.js

可以在这里下载

下载后，在html中引入

页面布局

html部分

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部分:

window.onload = function() {

var viewer = new Viewer(document.getElementById('imgBox'), {

url: 'data-imgurl'

});

}

效果:

预览前:

点击图片预览:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。