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 ...
随机推荐
- CTF中文件包含的一些技巧
i春秋作家:lem0n 原文来自:浅谈内存取证 0x00 前言 网络攻击内存化和网络犯罪隐遁化,使部分关键数字证据只存在于物理内存或暂存于页面交换文件中,这使得传统的基于文件系统的计算机取证不能有效应 ...
- Python学习笔记【第七篇】：文件及文件夹操作
介绍 我们用pytthon.C#.Java等这些编程语言,想要把文件(文字.视频....)永久保存下来就必须将文件写入到硬盘中,这就需要我们应用程序去操作硬件,我们这些编程语言是无法直接操作硬件的. ...
- 用Ajax遍历三级下拉框
用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...
- ThinkPHP 5隐藏public/index.php方法
1.复制public下的index.php与.htaccess文件至根目录: 2.直接修改index.php,将内容修改为:<?php require 'public/index.php'; ? ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- ionic3项目 出现 No provider for ApplicationInitStatus!
出现No provider for ApplicationInitStatus!原因是在app.module.ts文件忘记导入BrowserModule导致的,打开app.module.ts文件添加以 ...
- 【原】使用vue2+vue-router+vuex写一个cnode的脚手架
最近喜欢上了markdown的书写方式,所以博客直接写在github上来,点击查看
- Linux常用命令英文全称与中文解释
man: Manual 意思是手册,可以用这个命令查询其他命令的用法. pwd:Print working directory 意思是密码. su:Swith user 切换用户,切换到root用户 ...
- Spring-WebSocket 教程
WebSocket 教程 概述 WebSocket 是什么? WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 T ...
- Java基础系列--throw、throws关键字
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8484697.html 一.概述 throw和throws就是异常相关的关键字,在java中 ...