<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5键盘控制PPT幻灯片演示代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<article>
<section>
<h1><span>使用键盘的左右方向键来控制幻灯片</span>Slide <strong>1</strong></h1>
</section>
<section>
<h1><span>使用键盘的左右方向键来控制幻灯片</span>Slide <strong>2</strong></h1>
<h2>Use defaults</h2>
<pre>bespoke.horizontal.from('article', {
<strong>fx: true</strong>
});</pre>
</section>
<section>
<h1><span>bespoke-fx</span>Slide <strong>3</strong></h1>
<h2>Custom global options</h2>
<pre>bespoke.horizontal.from('article', {
fx: <strong>{
direction: "horizontal",
transition: "move",
reverse: false
}</strong>
});</pre>
</section>
<section>
<h1><span>bespoke-fx</span>Slide <strong>4</strong></h1>
<h2>Set per slide options</h2>
<pre><section>Slide 4</section></pre>
</section>
<section data-bespoke-fx-direction="vertical">
<h1><span>bespoke-fx</span>Slide <strong>5</strong></h1>
<h2>Direction: horizontal or vertical</h2>
<pre><section <strong>data-bespoke-fx-direction="vertical"</strong>>Slide 5</section></pre>
</section>
<section data-bespoke-fx-reverse="true">
<h1><span>bespoke-fx</span>Slide <strong>6</strong></h1>
<h2>Run transition in reverse</h2>
<pre><section <strong>data-bespoke-fx-reverse="true"</strong>>Slide 6</section></pre>
</section>
<section data-bespoke-fx-transition="move">
<h1><span>bespoke-fx</span>Slide <strong>7</strong></h1>
<h2>Different transitions: move [default]</h2>
<pre><section <strong>data-bespoke-fx-transition="move"</strong>>Slide 7</section></pre>
</section>
<section data-bespoke-fx-transition="move-fade">
<h1><span>bespoke-fx</span>Slide <strong>8</strong></h1>
<h2>Different transitions: move-fade</h2>
<pre><section <strong>data-bespoke-fx-transition="move-fade"</strong>>Slide 8</section></pre>
</section>
<section data-bespoke-fx-transition="move-both-fade">
<h1><span>bespoke-fx</span>Slide <strong>9</strong></h1>
<h2>Different transitions: move-both-fade</h2>
<pre><section <strong>data-bespoke-fx-transition="move-both-fade"</strong>>Slide 9</section></pre>
</section>
<section data-bespoke-fx-transition="move-different-easing">
<h1><span>bespoke-fx</span>Slide <strong>10</strong></h1>
<h2>Different transitions: move-different-easing</h2>
<pre><section <strong>data-bespoke-fx-transition="move-different-easing"</strong>>Slide 10</section></pre>
</section>
<section data-bespoke-fx-transition="scale-down-out-move-in">
<h1><span>bespoke-fx</span>Slide <strong>11</strong></h1>
<h2>Different transitions: scale-down-out-move-in</h2>
<pre><section <strong>data-bespoke-fx-transition="scale-down-out-move-in"</strong>>Slide 11</section></pre>
</section>
<section data-bespoke-fx-transition="move-out-scale-up">
<h1><span>bespoke-fx</span>Slide <strong>12</strong></h1>
<h2>Different transitions: move-out-scale-up</h2>
<pre><section <strong>data-bespoke-fx-transition="move-out-scale-up"</strong>>Slide 12</section></pre>
</section>
<section data-bespoke-fx-transition="scale-up-up">
<h1><span>bespoke-fx</span>Slide <strong>13</strong></h1>
<h2>Different transitions: scale-up-up</h2>
<pre><section <strong>data-bespoke-fx-transition="scale-up-up"</strong>>Slide 13</section></pre>
</section>
<section data-bespoke-fx-transition="scale-down-up">
<h1><span>bespoke-fx</span>Slide <strong>14</strong></h1>
<h2>Different transitions: scale-down-up</h2>
<pre><section <strong>data-bespoke-fx-transition="scale-down-up"</strong>>Slide 14</section></pre>
</section>
<section data-bespoke-fx-transition="glue">
<h1><span>bespoke-fx</span>Slide <strong>15</strong></h1>
<h2>Different transitions: glue</h2>
<pre><section <strong>data-bespoke-fx-transition="glue"</strong>>Slide 15</section></pre>
</section>
<section data-bespoke-fx-transition="flip">
<h1><span>bespoke-fx</span>Slide <strong>16</strong></h1>
<h2>Different transitions: flip</h2>
<pre><section <strong>data-bespoke-fx-transition="flip"</strong>>Slide 16</section></pre>
</section>
<section data-bespoke-fx-transition="fall">
<h1><span>bespoke-fx</span>Slide <strong>17</strong></h1>
<h2>Different transitions: fall</h2>
<pre><section <strong>data-bespoke-fx-transition="fall"</strong>>Slide 17</section></pre>
</section>
<section data-bespoke-fx-transition="newspaper">
<h1><span>bespoke-fx</span>Slide <strong>18</strong></h1>
<h2>Different transitions: newspaper</h2>
<pre><section <strong>data-bespoke-fx-transition="newspaper"</strong>>Slide 18</section></pre>
</section>
<section data-bespoke-fx-transition="push">
<h1><span>bespoke-fx</span>Slide <strong>19</strong></h1>
<h2>Different transitions: push</h2>
<pre><section <strong>data-bespoke-fx-transition="push"</strong>>Slide 19</section></pre>
</section>
<section data-bespoke-fx-transition="pull">
<h1><span>bespoke-fx</span>Slide <strong>20</strong></h1>
<h2>Different transitions: pull</h2>
<pre><section <strong>data-bespoke-fx-transition="pull"</strong>>Slide 20</section></pre>
</section>
<section data-bespoke-fx-transition="fold">
<h1><span>bespoke-fx</span>Slide <strong>21</strong></h1>
<h2>Different transitions: fold</h2>
<pre><section <strong>data-bespoke-fx-transition="fold"</strong>>Slide 21</section></pre>
</section>
<section data-bespoke-fx-transition="unfold">
<h1><span>bespoke-fx</span>Slide <strong>22</strong></h1>
<h2>Different transitions: unfold</h2>
<pre><section <strong>data-bespoke-fx-transition="unfold"</strong>>Slide 22</section></pre>
</section>
<section data-bespoke-fx-transition="room">
<h1><span>bespoke-fx</span>Slide <strong>23</strong></h1>
<h2>Different transitions: room</h2>
<pre><section <strong>data-bespoke-fx-transition="room"</strong>>Slide 23</section></pre>
</section>
<section data-bespoke-fx-transition="cube">
<h1><span>bespoke-fx</span>Slide <strong>24</strong></h1>
<h2>Different transitions: cube</h2>
<pre><section <strong>data-bespoke-fx-transition="cube"</strong>>Slide 24</section></pre>
</section>
<section data-bespoke-fx-transition="carousel">
<h1><span>bespoke-fx</span>Slide <strong>25</strong></h1>
<h2>Different transitions: carousel</h2>
<pre><section <strong>data-bespoke-fx-transition="carousel"</strong>>Slide 25</section></pre>
</section>
<section data-bespoke-fx-transition="sides">
<h1><span>bespoke-fx</span>Slide <strong>26</strong></h1>
<h2>Different transitions: sides</h2>
<pre><section <strong>data-bespoke-fx-transition="sides"</strong>>Slide 26</section></pre>
</section>
<section data-bespoke-fx-transition="slide">
<h1><span>bespoke-fx</span>Slide <strong>27</strong></h1>
<h2>Different transitions: slide</h2>
<pre><section <strong>data-bespoke-fx-transition="slide"</strong>>Slide 27</section></pre>
</section>
<section data-bespoke-fx-transition="cube" data-bespoke-fx-direction="vertical">
<h1><span>bespoke-fx</span>Slide <strong>28</strong></h1>
<h2>End</h2>
</section>
</article>
<script src="js/modernizr.custom.js" type="text/javas
HTML5键盘控制PPT幻灯片演示代码.zip
版权申诉
58 浏览量
2022-11-18
22:13:48
上传
评论
收藏 53KB ZIP 举报
HTML5键盘控制PPT幻灯片演示代码.zip （16个子文件） 
HTML5键盘控制PPT幻灯片演示代码 
HTML5键盘控制PPT幻灯片演示代码.jpg 26KB jiaoben4243 css 
style.css 2KB animations.css 51KB main.css 1KB
index.html 8KB js modernizr.custom.js 9KB demo.js 223B bespoke-fx.js 24KB bespoke.js 5KB dist bespoke-fx.js 24KB bespoke-fx.min.js 17KB src bespoke-fx.js 24KB animations.css 51KB main.css 1KB spec bespoke-fxSpec.js 918B libs modernizr modernizr.custom.js 9KB资源评论
