经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
viewer.js 视图预览demo
来源：cnblogs　　作者：yangzailu　　时间：2019/3/11 9:01:10　　对本文有异议 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.   <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui" />
  8.     <meta name="apple-mobile-web-app-capable" content="yes" />
  9.   <meta name="description" content="A simple jQuery image viewing plugin.">
  10.   <meta name="author" content="Chen Fengyuan">
  11.   <title>Viewer</title>
  12.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  13.   <link rel="stylesheet" href="css/viewer.css">
  14.   <link rel="stylesheet" href="css/main.css">
  15.   <link rel="stylesheet" href="css/style.css"/>
  16.   <link rel="stylesheet" href="css/commans.css"/>
  17. </head>
  18. <body>
  19.  
  20. <div id="wrapper" class="c_contact">
  21.    <ul>
  22.        <li class="c_contactLi">
  23.              <div class="customer">
  24.               <img src="img/head.png">
  25.  
  26.               <div class="d4"></div>
  27.               <div class="customer_cont">
  28.                 <span>您好，李先生。我是您的客服小考拉，猜您可能关注以下问题：</span>
  29.                 <u>我的今日到账记录(含今日提款)</u><br>
  30.                 <u>交易成功后钱没有到账怎么办？</u><br>
  31.                 <u>收款宝的提款规则是什么？</u>
  32.               </div>
  33.             </div>
  34.             <div style="clear: both;"></div>
  35.  
  36.             <div class="cont">
  37.               <h2>也许您对以下内容感兴趣</h2>
  38.               <div class="wrapper02" id="demo06">
  39.                 <div style="width: 464px;" class="scroller">
  40.                      <ul class="clearfix">
  41.                           <li><a href="javascript:;">申办信用卡</a></li>
  42.                           <li><a href="javascript:;">易分期</a></li>
  43.                           <li><a href="javascript:;">及贷</a></li>
  44.                           <li><a href="javascript:;">易分期</a></li>
  45.                           <li><a href="javascript:;">及贷</a></li>
  46.                     </ul>
  47.                 </div>
  48.               </div>
  49.  
  50.               <div style="clear: both;"></div>
  51.               <div class="swiper-container">
  52.                   <div class="swiper-wrapper">
  53.                       <div class="swiper-slide"><img src="img/banner.png"></div>
  54.                       <div class="swiper-slide"><img src="img/banner.png"></div>
  55.                       <div class="swiper-slide"><img src="img/banner.png"></div>
  56.                   </div>
  57.               </div>
  58.             </div>
  59.  
  60.  
  61.             <div class="customer_right">
  62.               <img id="cleer_r"  src="img/piz.png">
  63.                <!--向右的三角-->
  64.               <div class="arrow-right"></div>
  65.               <div class="cumt_right">
  66.                 <span>提款服务</span>
  67.               </div> 
  68.             </div>
  69.             <div style="clear: both;"></div>
  70.   
  71.  
  72.  
  73.                 <div style="width:100%;height:400px;">
  74.                   <ul class="docs-pictures clearfix" style="margin:0 auto;width:200px;text-align:center;"  class="append_img" id="galley2">
  75.                     <li style="width:100%;">
  76.                      <img data-original="img/picture.png" src="img/picture.png" alt="Cuo Na Lake" style="display:block;">
  77.                    </li>
  78.                   </ul>
  79.  
  80.                </div>
  81.  
  82.             <input type="button" value="追加图片" class="addimg">
  83.  
  84.             <div class="customer">
  85.               <img src="img/head.png">
  86.               <div class="d4"></div>
  87.               <div class="customer_cont2">
  88.                 <span>如您使用的是逐笔秒到，符合秒到条件，结算款项正常会在2小时内自动划款至您的结算账户。</span>
  89.               </div>
  90.             </div>
  91.             <div style="clear: both;"></div>
  92.  
  93.  
  94.             <div class="text">
  95.               <p>没有解决您的问题？点此转<u id="ctu">人工客服</u></p>
  96.             </div>
  97.  
  98.             <div style="margin-top: 18px;" class="service">
  99.               <span>2019年1月29日 10:56</span>
  100.             </div>
  101.  
  102.  
  103.             <div class="customer_right">
  104.             <img id="cleer_r" src="img/piz.png">
  105.              <!-- 向右的三角 -->
  106.             <div class="arrow-right"></div>
  107.             <div class="cumt_right_span">
  108.               <span>为什么我昨天发起的提款，到现在钱还没有到账？</span>
  109.             </div> 
  110.           </div>
  111.           <div style="clear: both;"></div>
  112.  
  113.           <div style="clear: both;"></div>
  114.           
  115.           <div class="customer">
  116.             <img src="img/head.png">
  117.             <div class="custimgl">
  118.                <img src="img/pic2.png">
  119.             </div>
  120.           </div>
  121.           <div style="clear: both;"></div>
  122.         
  123.             <div class="customer">
  124.               <img src="img/head.png">
  125.               <div class="d4"></div>
  126.               <div class="customer_cont2">
  127.                 <span>如您使用的是逐笔秒到，符合秒到条件，结算款项正常会在2小时内自动划款至您的结算账户。
  128.                   <div class="custimgz">
  129.                     <img class="pic_true" srcmaxZoomRatio="img/picture.png">
  130.                   </div>
  131.                 </span>
  132.               </div>
  133.                
  134.             </div>
  135.             <div style="clear: both;"></div>
  136.  
  137.           <div style="margin-bottom: 7rem;" id="botstop"></div>
  138.            <div style="clear: both;"></div>
  139.         </li>
  140.        </ul> 
  141.  </div> 
  142.   <div class="bott_diduan" style=""> 
  143.           <div class="shot">
  144.               <div id="ctu2" class="shot_pic onne"></div>
  145.               <div onclick="camt()" class="Taking active"></div>
  146.                <input type="file" style="display: none;" id="camafter" accept="image/*" capture='camera' />
  147.               <div onclick="pict()" class="picture cur"></div>
  148.               <input type="file" style="display: none;" id="camFront" accept="image/*"/>
  149.           </div>
  150.           <div class="foot">
  151.             <span class="u-editor-input">
  152.                   <input  type="text" class="chatText" value="" id="text" placeholder="请输入您想咨询的问题">
  153.             </span>
  154.             <button  class="u-editor-icons">发送</button>
  155.           </div>
  156. </div>
  157.  
  158.  
  159.   <!-- Scripts -->
  160.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  161.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  162.   <script src="https://fengyuanchen.github.io/js/common.js"></script>
  163.   <script src="js/viewer.js"></script>
  164.   <script src="js/main.js"></script>
  165.   <script type="text/javascript">
  166.     $(document).ready(function(){
  167.         $(".addimg").click(function(){
  168.           var str  = '<li style="width:100%;">';
  169.           str += '<img data-original="img/picture.png" src="img/picture.png" alt="Cuo Na Lake" style="display:block;">';
  170.           str += '</li>';
  171.             $("#galley2").append(str);
  172.             $("#galley2").viewer('update');
  173.                  var viewer = new Viewer(document.getElementById('galley2'), { 
  174.               url: 'data-original' 
  175.           });
  176.         });
  177.     });
  178.   </script>
  179. </body>
  180. </html>

 

效果：

原文链接：http://www.cnblogs.com/yangzailu/p/10494545.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号