程序员装逼利器之impress.js
impress.js是一个javascript的第三方类库,可以实现ppt,动画,切换等功能,在所有的web浏览器上均有不错表现,但目前不支持手机浏览器。
下载地址: https://github.com/impress/impress.js
开始装逼之前,首先看一下demo 地址: http://impress.github.io/impress.js/
怎么样,不是是相当酷炫?
如何使用
实际上文件的注释就是一份完整的说明文档,为方便初学者理解学习,特意整理了一下,我将它分为元素结构(页面结构),元素属性,回调函数,接下来我将依次介绍
元素结构
首先,impress.js不依赖任何外部样式表及依赖库(如jquery),这样你就可以放心大胆的修改了,后面我会讲到,需要注意的是,要实现的所有元素必须包含在<div id="impress"></div>这个根元素中,然后以页为单位,每一页的内容又必需包含在<div class="step"></div>中,即简单的页面结构就是:
<div id="impress"><div class="step">第一屏</div><div class="step">第二屏</div><div class="step">第三屏</div>
</div>
上述就是一个最简单的impress.js结构,在根元素#impress中,又包含一个特殊的子元素
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
这个元素时用来显示所有元素的,就相当于将所有的.step显示在同一页面上
根元素#impress之外
<div class="hint"><p>使用<b>空格键</b>或<b>箭头键</b>导航</p>
</div>
这个元素时一个特殊的提示框,用来在首页展示你想展示的信息
<div class="fallback-message"><p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p><p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
该元素是用来在你的浏览器不支持impress.js时给出提示信息的 以上几个特殊的子元素可以没有,不会影响使用,一个完整的结构如下:
<body><div class="fallback-message">浏览器不支持提示</div><div id="impress"><div class="step">第一屏</div><div class="step">第二屏</div><div class="step">第三屏</div><div id="overview">全部</div></div><div class="hint">使用提示</div>
</body>
后面我还会介绍到一些其他的元素用法
元素属性
data-x:元素在x轴的位置
data-y:元素在y轴的位置
data-z:元素的z轴的位置
data-scale:元素缩放比例
data-rotate:元素旋转角度 注意是相对于0度旋转的角度
data-rotate-x: 元素绕x轴旋转角度 同上
data-rotate-y: 元素绕y轴旋转角度 同上
data-rotate-z: 元素绕z轴旋转角度 同上
整个页面你可以理解成一个无限大的三位坐标系(自行脑补),然后所有的子元素在各个坐标点上排列。
回调函数
首先你需要知道的是,impress.js将按照元素顺序依次显示元素,你可以给每个元素指定id,播放时url栏中的id即为该页面id,你也可以不指定,impress.js将默认为你带上step-1 step-2
实质上impress.js并没有提供回调函数,但是正如我前面说过的,由于是源生的,所以我们可以修改源码,修改impress.js文件中279行如下
var onStepEnter = function (step) {if (lastEntered !== step) {triggerEvent(step, "impress:stepenter");lastEntered = step;}//页面进入时的触发事件var url = location.href;var stepId = url.substr(url.lastIndexOf('/')+1);if(typeof goInStep == 'function'){goInStep(stepId);}else{return false;}};// `onStepLeave` is called whenever the step element is left// but the event is triggered only if the step is the same as// last entered step.var onStepLeave = function (step) {if (lastEntered === step) {triggerEvent(step, "impress:stepleave");lastEntered = null;}//页面离开后加个触发事件var url = location.href;var stepId = url.substr(url.lastIndexOf('/')+1);if(typeof goInStep == 'function'){goOutStep(stepId);}else{return false;}};
新增两个回调函数,一个在页面进入时执行,一个在页面离开时执行 分别为goOutStep()和goInStep(); 参数为该页面id或者默认给上的step-1之类的标志,其他需求请根据需要自行修改
扩展
在实现播放ppt功能时,我们经常需要显示ppt进度,这时源生的好处就体现出来了,我们可以使用impress-progress.js,来为其显示进度条,具体使用就不再此处过多说明了。
下载地址:https://github.com/m42e/impress.js-progress
除了可以摸你ppt功能,你还可以利用它做一些诸如建立,页面特效等功能,亦可根据需要任意修改,有次神器,祝各位同行在装逼的道路上更有逼格! 本期装逼指南就介绍到这里
程序员装逼利器之impress.js相关推荐
- java装逼的话_程序员装逼指南(语言篇)
原标题:程序员装逼指南(语言篇) 语言:千万不要说自己是做Java或者.Net的,一下子就屌丝了.PHP现在也不行,Python稍微有点烂大街,但还是明显要强过前几个.剩下的可以说自己是做Ruby的, ...
- 高级程序员装逼指南,是高级哦!(转)
高级程序员装逼指南,是高级哦! 下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图 ...
- 高级程序员装逼指南,是高级哦!
下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图样图森破 然后在下跟微博上的一些 ...
- 21条精通程序员装逼技术
1. 电脑一定不能盖机箱盖,用来表示自己拆装机小CASE且经常升级自己用了四五年的破电脑<br><br> 2. 桌上必须散放各种内存条 优盘 或者拆开的光驱硬盘报废的CPU等 ...
- 程序员装逼被怼,决定用面试证明自己,结果......
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Linux编程点击右侧关注,免费入门到精通! 作者丨三级狗 https://www.zhihu.com/quest ...
- 程序员装逼指南(2022年版本)
❀我们的征途是星辰大海❀ ❀一定用高端,不管实用不实用❀ ❀不管懂不懂,英文字典必须有❀ 编译器·千万别用ide,起码也得是Emacs·编码语言[lisp] 语言: 千万不要说自己是做Java或者.N ...
- 自定义注解!绝对是程序员装逼的利器!!
GitHub 18k Star 的Java工程师成神之路,不来了解一下吗! GitHub 18k Star 的Java工程师成神之路,真的不来了解一下吗! GitHub 18k Star 的Java工 ...
- 装逼利器之DLog -DEBUG
#ifdef DEBUG #define DLog(fmt, ...) NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __L ...
- 程序员装B小技巧——管理你的桌面
程序员装B小技巧--管理你的桌面 引言 想不想拥有一个和下方截图一样简单快捷的桌面?随着工作学习的时间推移,我们电脑里面的各种软件和文档日渐增多,导致我们的桌面变得杂乱且不美观.身为一个程序员怎么能容 ...
最新文章
- windows phone (26) ApplicationBar应用程序栏
- ListView滑动位置精准记忆
- 大学物理规范作业25稳恒磁场_山东一地出台规定:严禁家长代批作业,违反规定将被一票否决...
- .NET 平台采用率的提升归功于开源
- easyPR源码解析之plate_locate.h
- mysql 中文的数据类型_MySQL 数据类型
- slackware_Slackware年满25岁,Perl告白,PowerShell调整,Linux网络,Emacs等
- java 查找引用_java – Eclipse查找方法的引用
- CAS单点登录(SSO)
- 黑马品优购项目的总结-首页
- 基于ThinkPHP5框架知识付费系统网站源码含PC+移动+小程序
- [原创]AM3352 + TPS65910 调试方法+调试记录
- 三目表达式的个人总结
- 将哼唱转换为旋律音符
- 05 js面向对象(属性操作符,创建对象)
- 如何对C盘进行扩容重新分区?
- 源码:Mybatis的LogFactory生成逻辑
- codeforces 418B. Cunning Gena (状态dp)
- DirectX End-User Runtimes2010 dl
- 100.8元该怎么花,笨拙的人从来不会思考这个问题
热门文章
- 噬菌体展示文库构建全流程
- url.parse() 的替换方法new URL(),URl.parse()的使用。
- 彩色瓷砖(python)
- Django之ContentType理解应用
- android之来电知了
- 我大中华微软MVP中国区人才库(转)
- CryptoJs加密 AES加密
- 【已解决】LaTeX使用natbib时,在正文使用authoryear格式,但是在reference中使用数字编号
- 计算机术语中ICT表示__,电大《计算机文化基础》选修平台题库
- html5 手机页面 允许放大,阻止移动设备(手机、pad)浏览器双击放大网页的方法