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

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

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>  


http://www.aseoe.com/ true PPT演示稿效果的JavaScript幻灯片插件 http://www.aseoe.com/show-22-818-1.html report 3017.5 bespoke-fx是一款类似PPT演示稿效果的JavaScript幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换,它内置了23种CSS3动画过渡效果,非常实用。安装可以通过 npm 或 bower 来安装在该插件。$bowerins
TAG:PPT 幻灯片 JavaScript 插件
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-22-818-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)