<script src="../res/js/viewer.min.js"></script>
<script type="text/javascript">

//F.ready(show());
//window.onload = show(); 
function show() {

var viewer = new Viewer(document.getElementById('dowebok'), {
url: 'data-original'
});
}

</script>

注意:

<ul id="jq22">

    <li><img src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" alt="图片6"></li>
</ul>
这是图片的前台样式,图片必须放在<ul><li></li></ul>中。
另外VIEWER.JS支持的样式有很多,有兴趣的可以自己查看。

使用VIEWER.JS进行简单的图片预览的更多相关文章

  1. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  3. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. JS微信网页使用图片预览(放大缩小)

    前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...

  5. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用js加载本地图片预览功能

    直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safa ...

  8. 使用Qt实现简单的图片预览效果 good

    http://www.cnblogs.com/appsucc/archive/2012/02/28/2371506.html Qt之实现工具箱界面程序 http://www.cnblogs.com/a ...

  9. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java使用Junit工具进行单元测试

    目录 1.类的定义: 2.Junit工具的使用: 3.对该类进行单元测试并查看结果: 4.记录各个阶段的时间 5.将过程记录在个人博客上(github地址) 1.类的定义:类是同一事物的总称,类是封装 ...

  2. 在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  3. 几个SQL语句(备忘)

    1.三涨停 select biao1.代码,biao1.名称 from biao1,biao2,biao3 where (biao1.涨幅+ biao2.涨幅+biao3.涨幅)>0.27 an ...

  4. Visual Studio自动添加头部注释 -C#开发2010-2013验证

    在团队开发中,头部注释是必不可少的.但在开发每次新建一个类都要复制一个注释模块也很不爽,所以得想个办法让开发工具自动生成我们所需要的模板.....操作方法如下: 找你的vs安装目录, 比如我的是在D盘 ...

  5. PB程序源码文件结构 pbl文件 pbd文件

    最近公司给了一套PB的源码,一个8.0,一个9.0,让给一个客户做软件整合,之前只听过PB看过别人写代码,为了快速上手,了解了一下PB的文件,记录如下:pbl为pb源码文件 pbd为程序编译后的文件 ...

  6. Python-WXPY实现微信监控报警

    概述: 本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序.博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的将工作和学习联系在一起. 博文中主要使用到的 ...

  7. Excel导出百万级数据解决方案

    因项目业务,需要导出百万级数据到excel,在研究了各种方案后,最终确定了用POI的SXSSFWorkbook. SXSSFWorkbook是POI3.8以上新增的,excel2007后每个sheet ...

  8. HashTable的故事----Jdk源码解读

    HashTable的故事 很早之前,在讲HashMap的时候,我们就说过hash是散列,把...弄碎的意思.hashtable中的hash也是这个意思,而table呢,是指数据表格,也就是说hasht ...

  9. 如何开始使用bootstrap

    登陆Bootstrap官网:http://getbootstrap.com/ Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用 bootstrap框架初 ...

  10. CONSOLE_SCREEN_BUFFER_INFO 结构体

    CONSOLE_SCREEN_BUFFER_INFO结构体 来源:https://msdn.microsoft.com/en-us/library/ms682093(v=vs.85).aspx 作用 ...