如今使用PPT已经不是什么了不起的事情了,但如果能利用HTML、CSS以及JavaScript的力量来制造一款PPT,那就非常抢眼了。reveal.js正满足了我们这样的需求。

如何使用

reveal.js能够接受两种语法,一种即是HTML,而另一种则是Markdown。两种分别示例如下:

Single Horizontal Slide
Vertical Slide 1
Vertical Slide 2
## Page title A paragraph with some text and a [link](http://hakim.se).

整体框架做好之后,我们需要进行初始化,以便设置一些基本参数:

Reveal.initialize({
    // 右下角显示控制按钮
    controls: true,

    // 显示演示进度条
    progress: true,

    // 将演示的页面依次加入浏览器历史
    history: false,

    // 开启键盘导航
    keyboard: true,

    // 循环演示
    loop: false,

    // 自动换页间隔(ms),0为禁用
    autoSlide: 0,

    // 启用鼠标滚轮
    mouseWheel: true,

    // 鼠标在链接上悬停时,启用3D滚动效果
    rollingLinks: true,

    // 换页方式
    transition: 'default' // 默认值:default/cube/page/concave/linear(2d)
});

最后,调用reveal.js的API即可:

// Navigation
Reveal.navigateTo( indexh, indexv );
Reveal.navigateLeft();
Reveal.navigateRight();
Reveal.navigateUp();
Reveal.navigateDown();
Reveal.navigatePrev();
Reveal.navigateNext();
Reveal.toggleOverview();

// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

Reveal.getIndices(); // { h: 0, v: 0 } }

许可证

reveal.js使用MIT协议。

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

Comments are closed.

Post Navigation