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 ...
随机推荐
- 微信小程序中如何使用WebSocket实现长连接(含完整源码)
本文由腾讯云技术团队原创,感谢作者的分享. 1.前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...
- 吴恩达机器学习笔记47-K均值算法的优化目标、随机初始化与聚类数量的选择（Optimization Objective & Random Initialization & Choosing the Number of Clusters of K-Means Algorithm）
一.K均值算法的优化目标 K-均值最小化问题,是要最小化所有的数据点与其所关联的聚类中心点之间的距离之和,因此 K-均值的代价函数(又称畸变函数 Distortion function)为: 其中
- 第82节:Java中的学生管理系统
第82节:Java中的学生管理系统 学生管理系统的删除功能 删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...
- js-完整轮播图
js-完整轮播图 今天写一个完整的轮播图,首先它需要实现三个功能:1.鼠标放在小圆点上实现轮播.2.点击焦点按钮实现轮播.3.无缝自动轮播. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布 ...
- Python - 一些值得阅读的PEP
1- PEP简介 PEP是Python增强提案(Python Enhancement Proposal)的缩写.社区通过PEP来给Python语言建言献策,每个版本的新特性和变化都是通过PEP提案经过 ...
- JDK9新特性实战：流关闭新姿势
做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...
- 【sping揭秘】24、Spring框架对JMS的集成（无环境版，以后学MQ的时候再隆重介绍）& 任务调度和线程池
这个我也不是很了解,那么这个需要好好学习一下了 JMS有2种消息域类型 1. point to point 点对点模式 2.发布订阅模式 publish/subscribe Pub/Sub 模式 传 ...
- 今日头条面试题——LRU原理和Redis实现
很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU. 我的第一反应应该是内存不够的场景下,淘汰旧内容的策略.LRU ... Least R ...
- RestyCircuitBreaker --- openresty断路器
简介 由于某些场景下服务提供方和调用方都无法做到可用性,当系统远程调用时,可能会因为某些接口变慢导致调用方大量HTTP连接被阻塞而引发雪崩. 解决思路如下: 服务提供方实现接口快速失败,当处理时间达到 ...
- Java后端工程师必备书单（含大后端方向相关书籍）
学习Java和其他技术的资源其实非常多,但是我们需要取其精华去其糟粕,选择那些最好的,最适合我们的,同时也要由浅入深,先易后难.基于这样的一个标准,我在这里为大家提供一份Java的学习资源清单. 一: ...