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. 【NOIP2015提高组】Day2 T2 子串
			
    题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...
    
			
    2. 
						
  2. 微软Tech Summit 2017，等你来打Call
			
    2017年10月31至11月3日,由微软举办的Tech Summit 2017技术暨生态大会将在北京盛大举办,要在北京连开四天.今年的技术大会看头十足,不仅有大咖级人物带来十二大主题课程,更有三天四场 ...
    
			
    3. 
						
  3. Python BDD自动化测试框架初探
			
    1. 什么是BDD BDD全称Behavior Driven Development,译作"行为驱动开发",是基于TDD (Test Driven Development 测试驱动 ...
    
			
    4. 
						
  4. 博客迁移至 http://www.loveli.site
			
    对于博客园的Markdow 支持太过...,你懂的,  以后博客迁移至:http://www.loveli.site
    
			
    5. 
						
  5. VMware驱动程序"vmci.sys"的版本不正确 怎么解决
			
    解决办法: 1.创建好虚拟机之后,别打开电源,然后到建好的虚拟机文件夹里: 2.找到后缀vmx的文件,记事本打开: 3.找到vmci0.present='TRUE',把true改为false: 4.保 ...
    
			
    6. 
						
  6. java 操作格子问题（线段树）
			
    很久之前做过线段树的问题(操作格子),时间长了之后再次接触到,发现当初理解的不是很透彻,然后代码冗长,再遇到的时候发现自己甚至不能独立地完成这个问题. 所以算法这个东西啊, 第一,是要经常练习(我个人 ...
    
			
    7. 
						
  7. Matrix  矩阵
			
    CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示意图:3D变换则 ...
    
			
    8. 
						
  8. OpenCV二维Mat数组（二级指针）在CUDA中的使用
			
    CUDA用于并行计算非常方便,但是GPU与CPU之间的交互,比如传递参数等相对麻烦一些.在写CUDA核函数的时候形参往往会有很多个,动辄达到10-20个,如果能够在CPU中提前把数据组织好,比如使用二 ...
    
			
    9. 
						
  9. Linux命令kill和signal
			
    Linux命令kill和signal kill命令用于终止指定的进程(terminate a process),是Unix/Linux下进程管理的常用命令.通常,我们在需要终止某个或某些进程时,先使用 ...
    
			
    10. 
						
  10. 【功能代码】---2.patchca生成验证码
			
    Java使用patchca生成验证码        Patchca是Piotr Piastucki写的一个java验证码开源库,打包成jar文件发布,patchca使用简单但功能强大. 本例实现了自定 ...
    
			
    11.