Reveal.js HTML5炫酷幻灯片

最新推荐文章于 2024-08-08 08:15:52 发布

墨墨博客

最新推荐文章于 2024-08-08 08:15:52 发布

阅读量5.1k

点赞数 1

分类专栏： html5 reveal.js 文章标签： html5 reveal.js 幻灯片 ppt

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53839180

版权

html5 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

reveal.js

1 篇文章 0 订阅

订阅专栏

用reveal.js和HTML5制作幻灯片，炫到没朋友！

1、首先下载reveal.js，然后引入

2、在index.html里面引入css和js，我写的简单demo如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/reveal.css">
	<link rel="stylesheet" href="css/theme/league.css">
	<!--Add support for earlier versions of Internet Explorer -->
  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>
<body>
	<div class="reveal">
	<div class="slides">
		<section data-transition="zoom">  <h1>Single Horizontal Slide</h1> </section>
		<section>
			<section >
			<p class="fragment">Vertical Slide 1</p><!--fragment是碎片展示-->
			<p class="fragment">Vertical Slide 2</p>
			<p class="fragment">Vertical Slide 3</p>
			 </section>
			<section data-background="url(images/12.jpg)">Vertical Slide dsd</section>
			<!--图片直接这样引用-->
</section>
</div>
	<div class="slides">
		<section data-transition="zoom">Happy New Year!</section>
		<section >Happy New Year!5656</section>
		<section >Happy New Year!5646</section>
		<section >Happy New Year!46456</section>
		<section>
			<section data-background-transition="zoom" data-background="#defbbc"> <h1>Vertical Slide 1</h1> </section>
			<section data-transition="zoom">Vertical Slide 2</section>
			<section data-transition="convex">Vertical Slide 3</section>
			<section data-transition="">Vertical Slide 4</section>
		</section>
	</div>


	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>
	<script>
		Reveal.initialize({
			// controls:false   //只用空格切换
			transition:'convex',//切换过渡效果
			backgroundTransition: 'convex',// 全屏幻灯片背景的过渡效果

		});
	</script>
</body>
</html>

3、一些注意：

（1）data-background 属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景： color, image, video 和 iframe
（2）点击 "Esc" 或 "o" 键来切换概览模式

（3）键盘上点击 »F« 按键即可进入全屏模式。点击 »ESC« 按键退出全屏模式

（4）嵌入的 HTML5 <video>/<audio> 以及 YouTube 内联框架将会在你从一个幻灯片导航离开的时候自动暂停。这可以通过给你的元素指定一个 data-ignore 属性来禁止。

（5）局幻灯片切换效果是通过 transition 配置值来设定的。你可以通过指定<section>元素的 data-transition 属性来重写全局配置。支持效果： none/fade/slide/convex/concave/zoom