您所在的位置:Web培训学院>web特效设计 > PPT演示稿效果的JavaScript幻灯片插件

PPT演示稿效果的JavaScript幻灯片插件

2017-12-26 16:30:55来源:互联网浏览次数:

bespoke-fx是一款类似PPT演示稿效果的JavaScript幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换,它内置了23种CSS3动画过渡效果,非常实用。

安装

可以通过 npm 或 bower 来安装在该插件。
 

  1. $ bower install bespoke-fx  
  2. $ npm install bespoke-fx   

使用方法

该插件基于bespoke.js插件,使用时先要引入bespoke.js文件,再引入bespoke-fx.js文件。另外还需要引入main.css和animations.css样式文件。
 

  1. <link rel="stylesheet" href="path/to/main.css">  
  2. <link rel="stylesheet" href="path/to/animations.css">  
  3. <script src="js/bespoke.js"></script>  
  4. <script src="js/bespoke-fx.js"></script>    

HTML结构

该幻灯片插件的基本HTML结构如下:
 

  1. <article>  
  2.   <section>Slide 1</section>  
  3.   <section>Slide 2</section>  
  4.   <section>Slide 3</section>  
  5. </article>   

初始化插件

可以使用下面的方法来初始化该幻灯片插件。

或者传入配置参数:
 

  1. bespoke.horizontal.from('article', {  
  2.   fx: true  
  3. });  
  1. bespoke.vertical.from('article', {  
  2.   fx: {  
  3.     direction: "vertical",  
  4.     transition: "cube",  
  5.     reverse: true  
  6.   }  
  7. });  


配置参数

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设置单独的参数。例如:
 

  1. <section data-bespoke-fx-transition="cube"  
  2.       data-bespoke-fx-direction="vertical"  
  3.       data-bespoke-fx-reverse="true">Slide</section>   

 

[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。版权归原作者所有,如涉及作品内容、版权和其它问题请在30日内与本网联系,我们将在第一时进行处理

上一篇:HTML5相册照片浏览器 可连接Flickr照片服务

下一篇:three.js简介——3D框架

热门标签

Java编程软件

吐血推荐

中公优就业荣获知名IT品牌

中公优就业荣获中国教育在线“2017年度知名IT培训品牌”大奖


5分钟读懂HTML5
共有590人在学 | 免费
微信号:ujiuye
获取更多Web资源
中公教育IT培训品牌
官方微博
获取Web新动向
中公教育IT培训品牌