bespoke-fx是一款类似PPT演示稿效果的JavaScript幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换，它内置了23种CSS3动画过渡效果，非常实用。
安装
可以通过 npm 或 bower 来安装在该插件。
- $ bower install bespoke-fx
- $ npm install bespoke-fx
使用方法
该插件基于bespoke.js插件，使用时先要引入bespoke.js文件，再引入bespoke-fx.js文件。另外还需要引入main.css和animations.css样式文件。
- <link rel="stylesheet" href="path/to/main.css">
- <link rel="stylesheet" href="path/to/animations.css">
- <script src="js/bespoke.js"></script>
- <script src="js/bespoke-fx.js"></script>
HTML结构
该幻灯片插件的基本HTML结构如下：
- <article>
- <section>Slide 1</section>
- <section>Slide 2</section>
- <section>Slide 3</section>
- </article>
初始化插件
可以使用下面的方法来初始化该幻灯片插件。
- bespoke.horizontal.from('article', {
- fx: true
- });
或者传入配置参数：
- bespoke.vertical.from('article', {
- fx: {
- direction: "vertical",
- transition: "cube",
- reverse: true
- }
- });
配置参数
bespoke-fx幻灯片插件的配置参数如下：
- direction：动画的方向，可以是：horizontal 或 vertical。
- transition：指定过渡动画的类型，参考下面的多行过渡类型描述。
- reverse：设置为true强迫执行反向动画。
过渡动画
可用的CSS3动画过渡动画如下：
- move
- move-fade
- move-both-fade
- move-different-easing
- scale-down-out-move-in
- move-out-scale-up
- scale-up-up
- scale-down-up
- glue
- flip
- fall
- newspaper
- push
- pull
- fold
- unfold
- room
- cube
- carousel
- sides
- slide
设置单独幻灯片的参数
你可以通过data-bespoke-transition、data-bespoke-direction和data-bespoke-reverse来为某个幻灯片slide设置单独的参数。例如：
- <section data-bespoke-fx-transition="cube"
- data-bespoke-fx-direction="vertical"
- data-bespoke-fx-reverse="true">Slide</section>
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-22-818-1.html
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-22-818-1.html
