viewer.js 视图预览demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="A simple jQuery image viewing plugin.">
<meta name="author" content="Chen Fengyuan">
<title>Viewer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/viewer.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/commans.css"/>
</head>
<body> <div id="wrapper" class="c_contact">
<ul>
<li class="c_contactLi">
<div class="customer">
<img src="img/head.png"> <div class="d4"></div>
<div class="customer_cont">
<span>您好，李先生。我是您的客服小考拉，猜您可能关注以下问题：</span>
<u>我的今日到账记录(含今日提款)</u><br>
<u>交易成功后钱没有到账怎么办？</u><br>
<u>收款宝的提款规则是什么？</u>
</div>
</div>
<div style="clear: both;"></div> <div class="cont">
<h2>也许您对以下内容感兴趣</h2>
<div class="wrapper02" id="demo06">
<div style="width: 464px;" class="scroller">
<ul class="clearfix">
<li><a href="javascript:;">申办信用卡</a></li>
<li><a href="javascript:;">易分期</a></li>
<li><a href="javascript:;">及贷</a></li>
<li><a href="javascript:;">易分期</a></li>
<li><a href="javascript:;">及贷</a></li>
</ul>
</div>
</div> <div style="clear: both;"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner.png"></div>
<div class="swiper-slide"><img src="img/banner.png"></div>
<div class="swiper-slide"><img src="img/banner.png"></div>
</div>
</div>
</div> <div class="customer_right">
<img id="cleer_r" src="img/piz.png">
<!--向右的三角-->
<div class="arrow-right"></div>
<div class="cumt_right">
<span>提款服务</span>
</div>
</div>
<div style="clear: both;"></div> <div style="width:100%;height:400px;">
<ul class="docs-pictures clearfix" style="margin:0 auto;width:200px;text-align:center;" class="append_img" id="galley2">
<li style="width:100%;">
<img data-original="img/picture.png" src="img/picture.png" alt="Cuo Na Lake" style="display:block;">
</li>
</ul> </div> <input type="button" value="追加图片" class="addimg"> <div class="customer">
<img src="img/head.png">
<div class="d4"></div>
<div class="customer_cont2">
<span>如您使用的是逐笔秒到，符合秒到条件，结算款项正常会在2小时内自动划款至您的结算账户。</span>
</div>
</div>
<div style="clear: both;"></div> <div class="text">
<p>没有解决您的问题？点此转<u id="ctu">人工客服</u></p>
</div> <div style="margin-top: 18px;" class="service">
<span>2019年1月29日 10:56</span>
</div> <div class="customer_right">
<img id="cleer_r" src="img/piz.png">
<!-- 向右的三角 -->
<div class="arrow-right"></div>
<div class="cumt_right_span">
<span>为什么我昨天发起的提款，到现在钱还没有到账？</span>
</div>
</div>
<div style="clear: both;"></div> <div style="clear: both;"></div> <div class="customer">
<img src="img/head.png">
<div class="custimgl">
<img src="img/pic2.png">
</div>
</div>
<div style="clear: both;"></div> <div class="customer">
<img src="img/head.png">
<div class="d4"></div>
<div class="customer_cont2">
<span>如您使用的是逐笔秒到，符合秒到条件，结算款项正常会在2小时内自动划款至您的结算账户。
<div class="custimgz">
<img class="pic_true" srcmaxZoomRatio="img/picture.png">
</div>
</span>
</div> </div>
<div style="clear: both;"></div> <div style="margin-bottom: 7rem;" id="botstop"></div>
<div style="clear: both;"></div>
</li>
</ul>
</div>
<div class="bott_diduan" style="">
<div class="shot">
<div id="ctu2" class="shot_pic onne"></div>
<div onclick="camt()" class="Taking active"></div>
<input type="file" style="display: none;" id="camafter" accept="image/*" capture='camera' />
<div onclick="pict()" class="picture cur"></div>
<input type="file" style="display: none;" id="camFront" accept="image/*"/>
</div>
<div class="foot">
<span class="u-editor-input">
<input type="text" class="chatText" value="" id="text" placeholder="请输入您想咨询的问题">
</span>
<button class="u-editor-icons">发送</button>
</div>
</div> <!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://fengyuanchen.github.io/js/common.js"></script>
<script src="js/viewer.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".addimg").click(function(){
var str = '<li style="width:100%;">';
str += '<img data-original="img/picture.png" src="img/picture.png" alt="Cuo Na Lake" style="display:block;">';
str += '</li>';
$("#galley2").append(str);
$("#galley2").viewer('update');
var viewer = new Viewer(document.getElementById('galley2'), {
url: 'data-original'
});
});
});
</script>
</body>
</html>
效果：
viewer.js 视图预览demo的更多相关文章
- Viewer.js 图片预览插件使用
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...
- github上预览Demo网页最简单的方法
github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- pc或者微信上用pdf.js在线预览pdf和word
最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...
- Java+FlexPaper+swfTools 文档在线预览demo
1.概述 主要原理 1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件 2.通过swfTools将pdf文件转换成swf格式的文件 3.通过FlexP ...
- githup在线预览demo
有了这个方法真的很方便,可以无需下载代码在线就可以直接预览,所以就记一下吧.很简单,就是在地址栏中的http://前面加上 htmlpreview.github.com/? 这么个地址,回车后就 ...
- js图片预览插件，不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
随机推荐
- 吴恩达机器学习笔记29-神经网络的代价函数（Cost Function of Neural Networks）
假设神经网络的训练样本有
- 终端(命令行)连接MySQL
语法: mysql -h 主机名(ip) -u 用户名 -P 端口 -p 说明: -h: 主机名,表示要连接的数据库的主机名或者IP -u: 用户名,表示连接数据库的用户名 -P: 端口,表示要连接的 ...
- 字体图标-把SVG图标转换成所需要的字体图标
小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...
- Python开发爆破字典
这里只是分享一下Python如何生成爆破字典 关于爆破工具编写我会在下一篇提到 其实有了爆破字典的话,直接使用Burp,Hydra等一些工具就可以做爆破了! Burp的使用在我以前的博客中有写过,至于 ...
- 随手用python写一个下载jdk源码爬虫
最近在研读jdk源码,网上找了下资源,发现都不完整. 后来新发现了一个有完整源码的地方,主要包括了java,c,c++的东西,装逼需要,就想拿来玩玩.但是,找了好多种下载打开的方式,发现都不对.于是, ...
- git gc和fsck的用法
一.保证git良好的性能 在大的仓库中, git靠压缩历史信息来节约磁盘和内存空间. 压缩操作并不是自动进行的, 你需要手动执行 git gc: $ git gc 压缩操作比较耗时, 你运行git g ...
- Git基本命令 -- 历史
历史. 收先需要了解一下git log命令, 使用git的帮助看看: git help log: 执行该命令后, 我的win10弹出来一个html页面, 里面是git log命令的帮助: 首先看看gi ...
- Parquet 格式文件，查看Schema
需要社区工具:parquet-tools-1.6.0rc3-SNAPSHOT.jar git project: https://github.com/apache/p ...
- Java 基础：hashCode方法
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 一.前言 泥瓦匠最近被项目搞的天昏地暗.发现有些要给自己一些目标,关于技术的目标: 专注很重要.专注J ...
- 使用google wire解决依赖注入
使用google wire解决依赖注入 google wire是golang的一个依赖注入解决的工具,这个工具能够自动生成类的依赖关系. 当我们写代码的时候,都希望,类都是一个个独立的结构,互不耦合, ...