<!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. iis发布后模板字体不能加载的解决方案

    在使用ace模板的过程中就曾遇到过图标不显示的情况, 1.在iis和vs运行都不能显示图标,添加缺失的字体库后可以访问 2.把项目签入到阿里云时再一次失效,解决方法是添加Mime类型 .woff  a ...

  2. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  3. js控制多层单选，多选按钮，做隐藏操作

    项目中遇到多层级单选,多选按钮的置灰/隐藏操作.特意写了一个公用组件: //置灰方式 //controllerArr数组添加如下数据: //{ctrlName:"gds_anquanyuan ...

  4. python 调用c语言函数

    虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了 具体流程: c编写相关函数 ,编译成库 然后在python中加载这些库,指定调用函数. ...

  5. [Leetcode]895.最大频率栈

    Problem 实现 FreqStack,模拟类似栈的数据结构的操作的一个类. FreqStack 有两个函数: push(int x),将整数 x 推入栈中. pop(),它移除并返回栈中出现最频繁 ...

  6. npm jspdf报错

    137073 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modul ...

  7. HP C7000刀片服务器开关机过程

    HP C7000开关机过程   一.HP C7000关机过程 1.关闭台刀片服务器. 2.确认刀片已关机后,登录https://xxx.xxx.xxx.x/,Administrator/2PF2QT, ...

  8. jsp fmt页面显示value does not support runtime expressions

    最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...

  9. java正则表达式的忽略大小写

    (?i)abc 表示abc都忽略大小写  a(?i)bc 表示bc忽略大小写  a((?i)b)c 表示只有b忽略大小写

  10. 【转载】红外遥控HS0038B接法

        4.7uF电容的作用:去耦和旁路   去耦电容的主要功能就是提供一个局部的直流电源给有源器件,以减少开关噪声在板上的传播和将噪声引导到地.通常也把输出信号的干扰作为滤除对象. 旁路电容:为高频 ...