<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. MOF编译器无法连接VMI服务器。原因可能是语义错误的解决方案

    安装数据库时报错. 我这个是因为安装SQL SERVER时,没有卸载vs. 一般解决方法: WIN 7安装VS和SQL SERVER的顺序应该是先安装SQL SERVER 然后安装VS,当要重装SQL ...

  2. 由于IPv6导致的iOS应用发布失败,是否该怪Azure?

    IPv6已经被越来越广泛的支持了,尤其是苹果强制要求iOS (确切的说是iOS 9以及后续版本)应用必须支持IPv6之后(官方宣布),更将进一步推动IPv6的使用. 不过苹果应用作为客户端强制要求IP ...

  3. 教你如何取消GCD任务

    GCD 是一种非常方便的使用多线程的方式.通过使用 GCD,我们可以在确保尽量简单的语法的前提下进行灵活的多线程编程.在 "复杂必死" 的多线程编程中,保持简单就是避免错误的金科玉 ...

  4. 什么是Hadoop

    配上官方介绍 What Is Apache Hadoop?    The Apache™ Hadoop® project develops open-source software for relia ...

  5. Struts2框架05 result标签的类型

    1 result标签是干什么的 就是结果,服务器处理完返回给浏览器的结果:是一个输出结果数据的组件 2 什么时候需要指定result标签的类型 把要输出的结果数据按照我们指定的数据类型进行处理 3 常 ...

  6. Spring3 MVC 类型转换

    1. Spring在进行类型转化都是基于java.beans.PropertyEditor接口. 2. 可以使用@InitBinder来进行对单个controller的类型进行操作,比如添加Date类 ...

  7. CSS3-loading动画(五)

    CSS3-loading加载动画 在线示例demo:http://liyunpei.xyz/loading.html 之前发了四篇,二十二个效果,今天再分享六个效果,总计二十八个效果. 二十三.效果二 ...

  8. java循环、数组练习

    System.out.println("请输入学生个数"); int a=sc.nextInt();//定义一个变量说明学生的数量 int max=0; int[] scores= ...

  9. .net 类型转换

    在.net  平台下类型有两种方式可以进行类型转换,强转或as转换.(有的说法是两种方式都进行强转,有两种强转方式). 如:typeA objA = (typeA)objB 或者使用另一种typeA ...

  10. springJdbc like模糊查询,Spring namedParameterJdbcTemplate like查询

    springJdbc like模糊查询,Spring namedParameterJdbcTemplate like查询, SpringJdbc命名参数like模糊查询,namedParameterJ ...