impressjs扩展:显示页数/进度条

什么是impressjs?

impressjs就是为html文件添加css3动画,变成类似ppt效果的工具,它支持图片和文字(flash动画可能支持),跨平台,用impressjs做ppt,你再也不用担心pc上有没有安装powerpoint了。重要的是它学习门槛也很低。大家只要下载项目,打开index.html修改内容即可(不过作者并不提倡这样做)。大家有兴趣可以查看项目主页和demo。

github主页

demo页面

impressjs API开发

起因

之前由于公司需要我做个ppt介绍一下CDN,但是身为一个前端工程师,尤其是反感word的工程师,于是找到了这款高逼格的做演示文件的利器——impressjs。加了css3特效的html当然是华丽丽的,但是用起来之后发现和通常用的ppt还是有些区别,那就是缺少了当前页数的显示,再加上灵光一闪,觉得加个进度条也不错,于是中午抽空就写了一下~

js代码分析

添加当前页

impressjs的每一页都有一个step样式,总览页也不列外。而且每页都有一个id,如果id不存在的话则默认为’step-x’,x为序号。利用这个特性就可以实现所要的功能。

新增一个header元素,通过修改元素宽度来显示当前进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var showProgress = function(){
var head = {};
if(document.getElementsByTagName('header')[0]){
head = document.getElementByTagsName('header')[0];
} else {
head = document.createElement('header');
document.body.appendChild(head);
}
var percent = getCurrent()*100.00/getTotal();
console.log(percent);
head.style.width = percent + '%';
window.addEventListener("hashchange", function () {
var percent = getCurrent()*100.00/getTotal();
head.style.width = percent + '%';
}, false);
};

新增一个footer元素来显示当前页和总页数,同时监听url地址来的hash值变化来修改当前页序号

1
2
3
4
5
6
7
8
9
10
11
12
13
var showPage = function(){
var foot = {};
if(document.getElementsByTagName('footer')[0]){
foot = document.getElementByTagsName('foot')[0];
} else {
foot = document.createElement('footer');
document.body.appendChild(foot);
}
foot.innerText = getCurrent()>0?(getCurrent()+'/'+getTotal()):'';
window.addEventListener("hashchange", function () {
foot.innerText = getCurrent()>0?(getCurrent()+'/'+getTotal()):'';
}, false);
};

暴露接口

impressjs默认开放了4个接口

1
2
3
4
5
6
7
8
9
```
return (roots[ "impress-root-" + rootId ] = {
init: init,
goto: goto,
next: next,
prev: prev,
showPage: showPage,
showProgress: showProgress
});

css样式分析

底部显示页数,用固定定位

1
2
3
4
5
6
7
8
9
footer{
position: fixed;
bottom: 150px;
height: 30px;
text-align: center;
width: 100%;
font-size: 25px;
font-weight: 900;
}

顶部显示进度条,用固定定位,通过改变百分比宽度来表示进度

1
2
3
4
5
6
header{
position: fixed;
top: 0;
height: 10px;
background-color: #3879d9;
}

html的调用示例

1
2
impress().showPage();
impress().showProgress();

大结局

预知后事如何,可以点击查看我提交的版本以及作者的回复


一部由众多技术专家推荐, 帮你成为具有全面能力和全局视野工程师的进阶利器—— 《了不起的JavaScript工程师》出版了! 点击下方链接即刻踏上进阶之路!


亚里士朱德 wechat
更多WEB技术分享请订阅微信公众号“WEB学习社”