viewer.js插件简单使用说明
不需要依赖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插件简单使用说明的更多相关文章
- Viewer.js插件浏览图片
https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片
- 使用VIEWER.JS进行简单的图片预览
<script src="../res/js/viewer.min.js"></script><script type="text/java ...
- viewer.js的简单练习
html <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...
- js插件-简单拖拽
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...
- viewer.js图片查看器插件(可缩放/旋转/切换)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Viewer.js 图片预览插件使用
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...
- 强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...
- pdf.js插件使用记录,在线打开pdf
天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件. 有些人很好奇,在线打开pdf文档浏览器不是支持吗.是的你说的都是现代浏览 ...
- js插件---Amaze UI dialog如何使用
js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...
随机推荐
- 微信小程序—显示当前时间
问题: 在页面上显示当前时间(日期) 方法: 1.在util.js (创建项目自动生成)中: // util.js const formatTime = date => { const yea ...
- 052、Java中使用do…while循环实现1~100的累加
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- ①spring简介以及环境搭建(一)
注*(IOC:控制反转.AOP:面向切面编程) spring官网:http://spring.io/ spring简介: spring是一个开源框架 spring为简化企业级应用开发而生,使用Spri ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-glass
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- java.lang.NumberFormatException: For input string: "F"
在通过myBatis执行sql时,报错: java.lang.NumberFormatException: For input string: "F" xml中sql内容为: &l ...
- Spring Boot2(006):关于配置类(Configuration Classes)和配置(Configuration)
一.配置类(Configuration Classes) Spring Boot 支持基于 xml 的配置,但更偏向于使用基于 Java 的配置,通常建议使用定义有 main 方法的主 @Config ...
- jQuery原理系列-常用Dom操作
1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply ...
- C# 读取CSV格式数据 读取为DataTable类型
先贴代码: using System.Data;using System.Data.OleDb; static void Main(string[] args) { var strpath = Sys ...
- Python MySQL Order By
章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...
- python -- 犯过的错之变量作用域
1.写代码时发现取得变量值,会被覆盖,改为图二的写法后case_id则不会覆盖. 原因:可以理解为变量是内存中一个对象的“引用”.在函数参数传值时,变量也是内存对象的引用. 当对象为可更改对象时,是引 ...