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 ...
随机推荐
- elasticSearch新认知
之前已经学习使用过ElasticSearch的使用,今天补充巩固一下... 上一次的环境是在 linux下使用 EalsticSearch(安装教程详见:https://www.cnblogs.com ...
- 漏洞利用教程：msfpayload 和 Backdooring EXEs
漏洞利用教程:msfpayload 和 Backdooring EXEs 此版本的PrimalSec漏洞教程系列将介绍如何使用msfpayload创建各种有效负载.msfpayload是Metaspl ...
- HashMap是如何实现快速存取的
一.存储实现:put(key,vlaue) 首先我们先看源码: // 将“key-value”添加到HashMap中 public V put(K key, V value) { // 若 ...
- 微信小程序消息通知-打卡考勤
微信小程序消息通知-打卡考勤 效果: 稍微改一下js就行,有不必要的错误,我就不改了,哈哈! index.js //index.js const app = getApp() // 填写微信小程序ap ...
- Solr搜索引擎入门知识汇总
1.技术选型,为什么用solr而不用lucene,或者其他检索工具 lucene:需要开发者自己维护索引文件,在多机环境中备份同步索引文件很是麻烦 Lucene本质上是搜索库,不是独立的应用程序.而S ...
- Java-二进制转10进制原理机制
任何文件在计算机储存时都是以二进制储存的,由 1和0 组成,如: 101010101010100111110100101010 现在有一组二进制数据: 10010110 那么他转成10进制是多少呢(我 ...
- 【mysql】模糊查询的使用
1.like/not like 关键字的模糊查询(SQL模式) 基础模板: SELECT * FROM test WHERE name LIKE '%你好_' :匹配 ...
- 【分布式事务】基于RocketMQ搭建生产级消息集群？
导读 目前很多互联网公司的系统都在朝着微服务化.分布式化系统的方向在演进,这带来了很多好处,也带来了一些棘手的问题,其中最棘手的莫过于数据一致性问题了.早期我们的软件功能都在一个进程中,数据的一致性可 ...
- FIleZilla连接linux(Ubuntu)服务器的相关问题
想通过FileZilla传个tomcat到服务器,然后遇到了下面的两个问题,问题已经通过百度解决了,这里总结下: 1,虚拟机通过桥接模式连网,ip地址为:192.168.119.147 在FieZil ...
- intellij idea maven project 无法显示dependencies
Intellj 自动载入Mave依赖是一个很人性化的功能,但不排除有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作或者加载中途出现弱网的情况中断载入的,此时需要手动强制更新依赖. 如下 ...