<!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的更多相关文章

  1. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  2. github上预览Demo网页最简单的方法

    github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...

  3. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  4. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  5. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  6. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  7. Java+FlexPaper+swfTools 文档在线预览demo

    1.概述 主要原理 1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件 2.通过swfTools将pdf文件转换成swf格式的文件 3.通过FlexP ...

  8. githup在线预览demo

    有了这个方法真的很方便,可以无需下载代码在线就可以直接预览,所以就记一下吧.很简单,就是在地址栏中的http://前面加上  htmlpreview.github.com/?   这么个地址,回车后就 ...

  9. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

随机推荐

  1. python爬虫学习之使用BeautifulSoup库爬取开奖网站信息-模块化

    实例需求:运用python语言爬取http://kaijiang.zhcw.com/zhcw/html/ssq/list_1.html这个开奖网站所有的信息,并且保存为txt文件和excel文件. 实 ...

  2. Android JNI 学习(五)：References Api

    1. NewGlobalRef(创建全局引用) jobjectNewGlobalRef(JNIEnv *env, jobject obj); 创建 obj 参数所引用对象的新全局引用.obj 参数既可 ...

  3. WPF中TreeView控件的使用案例

    WPF总体来说还是比较方便的,其中变化最大的主要是Listview和Treeview控件,而且TreeView似乎在WPF是一个备受指责的控件,很多人说他不好用.我这个demo主要是在wpf中使用Tr ...

  4. 嘿！我用python帮我干这些事

    python 无疑是当下火上天的语言,但是我们又不拿来工作,那么能拿来干啥呢?我是这么干的. 1. 平时工作开发用不上,就当个计算器吧! python # 加减乘除 >>> (3 + ...

  5. 产品经理聊产品－－mac book pro 2018 初体验

    工作前几年,使用电脑,基本上都是微软的操作系统,自从从大厂出来之后,才逐渐熟悉使用linux,到现在基本上都是基本上一个月windows平台基本不需要开机就可以,可以说基本上被ubuntu的简洁和实用 ...

  6. 机器学习入门07 - 验证 (Validation)

    原文链接:https://developers.google.com/machine-learning/crash-course/validation/ 1- 检查直觉 将一个数据集划分为训练集和测试 ...

  7. Scala - 快速学习08 - 函数式编程：高阶函数

    函数式编程的崛起 函数式编程中的“值不可变性”避免了对公共的可变状态进行同步访问控制的复杂问题,能够较好满足分布式并行编程的需求,适应大数据时代的到来. 函数是第一等公民 可以作为实参传递给另外一个函 ...

  8. python学习的准备工作

    1.python安装 1.下载: https://www.python.org/downloads/windows/ 2.安装: 安装很简单,就是下一步,只是在最后要勾选上 Add Python 3. ...

  9. 《CLR Via C#》读书笔记：26.线程基础

    一.线程开销 操作系统创建线程是有代价的,其主要开销在下面列举出来了. 内存开销 线程内核对象 拥有线程描述属性与线程上下文,线程上下文占用的内存空间为 x86 架构 占用 700 字节.x64 架构 ...

  10. C++版 - 剑指Offer 面试题45：圆圈中最后剩下的数字(约瑟夫环问题，ZOJ 1088：System Overload类似)题解

    剑指Offer 面试题45:圆圈中最后剩下的数字(约瑟夫环问题) 原书题目:0, 1, - , n-1 这n个数字排成一个圈圈,从数字0开始每次从圆圏里删除第m个数字.求出这个圈圈里剩下的最后一个数字 ...