不需要依赖jQuery.js，只需要导入viewer.js和viewer.css文件即可。

插件GitHub地址：https://github.com/fengyuanchen/viewerjs

示例代码如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果</title>

        <link rel="stylesheet" href="css/viewer.min.css">

        <style>

            * { margin: 0; padding: 0;}

            #sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}

            #sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}

            #sucaihuo li img { width: 100%;}

            #sucaihuo2 { width: 700px; margin: 0 auto; font-size: 0;}

            #sucaihuo2 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}

            #sucaihuo2 li img { width: 100%;}

        </style>

    </head>

    <body>

        <h1>默认效果</h1>

        <h3>图片异源</h3>

        <!-- 展示和弹出图片源异源 -->

        <ul id="sucaihuo">

            <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>

            <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>

            <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>

            <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>

            <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>

            <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>

        </ul>

        <br/><br/><br/>

        <h3>图片同源</h3>

        <!-- 展示和弹出图片源同源 -->

        <ul id="sucaihuo2">

            <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>

	</body>

	<script src="js/viewer.min.js"></script>

	<!--

	<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>

	-->

	<script>

		var viewer = new Viewer(document.getElementById('sucaihuo'), {

			url: 'data-original'

		});

        var viewer2 = new Viewer(document.getElementById('sucaihuo2'));

	</script>

</html>

viewer.js插件简单使用说明的更多相关文章

  1. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

  2. 使用VIEWER.JS进行简单的图片预览

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

  3. viewer.js的简单练习

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

  4. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  5. viewer.js图片查看器插件（可缩放/旋转/切换）

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

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

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

  7. 强大的jQuery图片查看器插件Viewer.js

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

  8. pdf.js插件使用记录，在线打开pdf

    天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件. 有些人很好奇,在线打开pdf文档浏览器不是支持吗.是的你说的都是现代浏览 ...

  9. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

随机推荐

  1. 009、Java中超过了int的最大值或最小值的结果

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. 004.Delphi插件之QPlugins，参数传递

    界面如下 插件框架中大量使用了接口的东西,看的眼花缭乱,很多地方只做了申明,具体的实现是在另外的子类. DLL的代码如下 unit ParamTest; interface uses classes, ...

  3. 使用linux将一个服务器上的文件或者文件夹复制黏贴到另一个服务器上

    一.复制文件: (1)将本地文件拷贝到远程  scp 文件名 用户名@计算机IP或者计算机名称:远程路径 本地192.168.1.8客户端 scp /root/install.* root@10.12 ...

  4. HDU - 1864 最大报销额 （01背包）

    题意:现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编写 ...

  5. dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.63.dylib

    本地环境报错有 3 处,如下: 1. 执行命令,无论执行 php 的什么命令,统一报错 dyld: Library not loaded: /usr/local/opt/icu4c/lib/libic ...

  6. VS2012 ffmpeg 没有定义的lrint

    在common.h #ifndef AVUTIL_COMMON_H#define AVUTIL_COMMON_H下添加 #define lrint(f) (f>=0?(int32_t)(f+(d ...

  7. 001、MySQL查询服务器版本号和当前日期

    SELECT VERSION(), CURRENT_DATE; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.

  8. Elasticsearch 搜索API

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  9. Git的http与ssh配置

    http 进入git bash 直接clone所需项目 通过http方式 eg:git clone http://xxxxxxxxxx/bk_linux_inspect-master.git 会弹出提 ...

  10. Tornado的XSRF防范

    XSRF XSRF即为跨站请求伪造 这个漏洞利用了浏览器的一个允许恶意攻击者在受害者网站注入脚本使未授权请求代表一个已登录用户的安全漏洞. 了解XSRF 当一个网站的图片SRC属性为另一个网站的链接时 ...