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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 类似PPT演示稿效果的JavaScript幻灯片插件
类似PPT演示稿效果的JavaScript幻灯片插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-20
    阅读:
简要教程

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-transitiondata-bespoke-directiondata-bespoke-reverse来为某个幻灯片slide设置单独的参数。例如:

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

bespoke-fx幻灯片插件的github地址为:https://github.com/ebow/bespoke-fx