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樣式文件。

HTML結構

該幻燈片插件的基本HTML結構如下：

Slide 1

Slide 2

Slide 3

初始化插件

可以使用下面的方法來初始化該幻燈片插件。

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設置單獨的參數。例如：

data-bespoke-fx-direction="vertical"

data-bespoke-fx-reverse="true">Slide

總結

以上是生活随笔為你收集整理的html类似ppt的效果,类似PPT演示稿效果的JavaScript幻灯片插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。