viewer.js实现图片预览功能

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

1、css文件:viewer.css

2、js文件:viewer.js
可以在这里下载

下载后,在html中引入

<link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" />
<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>

效果:

预览前:

点击图片预览:

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

(0)

相关推荐

  • 简单实现JS上传图片预览功能

    js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

  • angularjs点击图片放大实现上传图片预览

    本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span

  • javascript实现input file上传图片预览效果

    本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下 运行效果图: 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.1

  • js实现纯前端的图片预览

    图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅.  一.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取Blob

  • javascript图片预览和上传(兼容IE)

    本文实例为大家分享了js图片预览和上传的具体代码,供大家参考,具体内容如下 var dailiApply = { change: function (evt) { evt.preventDefault(); var pic = document.getElementById("preview"), file = document.getElementById("f"); var ext=file.value.substring(file.value.lastInde

  • JS使用H5实现图片预览功能

    JS使用H5实现上传图片预览的功能,以下是代码的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> <script type="text/javascript"> //预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称 function

  • 轻松实现js图片预览功能

    本文实例讲述了js实现图片预览的方法,自己以前写的一个,代码比较简洁,分享给大家供大家参考.具体如下: 一.效果预览 效果图: 二.实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js图片预览功能</title> <script language=java

  • JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • 上传图片预览JS脚本 Input file图片预览的实现示例

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • js实现上传图片预览的方法

    本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) {     var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);     filextension=filextension.toLowerCase();     if ((filext

随机推荐