html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/viewer.css"/>
</head>
<body>
    <ul id="myul">
        <li><img src="img/1a.jpg"/> </li>
        <li><img src="img/2a.jpg"/> </li>
        <li><img src="img/3a.jpg"/> </li>
        <li><img src="img/4a.jpg"/> </li>
        <li><img src="img/5a.jpg"/> </li>
    </ul>
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/viewer.js"></script>
    <script src="js/demo01.js"></script>
</body>
</html>

//demo01.js
/**
 * Created by Loki on 2017/2/21.
 */
$("#myul").viewer({
    //底部导航栏0：不出现；
    navbar:0,
    //右上角的关闭按钮是否显示：true 为默认显示；
    button:true,
    //是否进入页面显示遮罩层，默认false;
    inline:false,
    //底部导航是否显示0：不显示底部按钮；
    toolbar:2,
    //是否 可拖动
    movable:true,
    //是否 可以旋转
    rotatable:true,
    //是否 可以缩放图片
    scalable:true,
    //是否 有过渡动画(小变大)
    transition:true,
    //点击播放  是否全屏播放
    fullscreen:true
})
												


											
viewer.js的简单练习的更多相关文章
	

    
						
  1. 使用VIEWER.JS进行简单的图片预览
		
    <script src="../res/js/viewer.min.js"></script><script type="text/java ...
    
		
    2. 
								
  2. viewer.js插件简单使用说明
		
    不需要依赖jQuery.js,只需要导入viewer.js和viewer.css文件即可. 插件GitHub地址:https://github.com/fengyuanchen/viewerjs 示例 ...
    
		
    3. 
						
  3. Viewer.js的inline模式
		
    开始 前几天接到一个小的支持,要做一个有图像预览和操作功能的demo,并且给出了参照的模板.刚开始简单的看了一下给的模板,一个是boxImg.js,另一个是Viewer.js. 问题 其实图片预览的插 ...
    
		
    4. 
						
  4. 原生JS封装简单动画效果
		
    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
    
		
    5. 
						
  5. HTML(.js) – 最简单的方式操作 DOM 的 JS 库
		
    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
    
		
    6. 
						
  6. 一款实用的viewer.js 图片相册
		
    Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件 ...
    
		
    7. 
						
  7. viewer.js图片查看器插件（可缩放/旋转/切换）
		
    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
    
		
    8. 
						
  8. Sea.js提供简单、极致的模块化开发体验
		
    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...
    
		
    9. 
						
  9. 投票系统 & js脚本简单刷票
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python第三课
			
    本节内容 1.列表 2.购物车设计思路 3.字典 1.列表 不可变类型:整型.字符串.元组tuple 可变类型:列表list.字典dict 2.购物车 3.字典
    
			
    2. 
						
  2. LeetCode 448. Find All Numbers Disappeared in an Array （在数组中找到没有出现的数字）
			
    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...
    
			
    3. 
						
  3. LeetCode 404. Sum of Left Leaves （左子叶之和）
			
    Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...
    
			
    4. 
						
  4. java对象类型转换和多态性
			
    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
    
			
    5. 
						
  5. eclipse中project facet问题
			
    一般出现在从别处import的项目上,只有项目文件夹上有红叉,其他地方都正常,现总结个人的几个解决方案: 有几种可能: 1,编码设置是否一致,也即是你项目原来的编码和现在eclipse用的默认编码是否 ...
    
			
    6. 
						
  6. net start mongodb 服务名无效解决方案
			
    net start mongodb 服务名无效 或者 net start mongodb 发生错误5,拒绝访问.是因为没有用管理员权限运行cmd. 解决方案:在window中,在搜索框输入cmd后,在 ...
    
			
    7. 
						
  7. gops - Go语言程序查看和诊断工具
			
    想必 Java 的开发者没有不知道或者没用过 jps 这个命令的,这个命令是用来在主机上查看有哪些 Java 程序在运行的. 我刚用 Go 语言程序的时候也很苦恼,我部署在公司服务器上的 Go 程序, ...
    
			
    8. 
						
  8. Problem P
			
    题意:FJ养牛,他想知道中间的牛是那一头: 思路:这道题有点水,思路就不写了 #include #include #include #define maxn 10005 using namespace ...
    
			
    9. 
						
  9. Toxophily
			
    Problem Description The recreation center of WHU ACM Team has indoor billiards, Ping Pang, chess and ...
    
			
    10. 
						
  10. Windows下命令（bat可用）
			
    转自 http://blog.csdn.net/CDersTeam/article/details/51346911 gpedit.msc-–组策略 2. sndrec32---录音机 3. Nslo ...
    
			
    11.