Reveal.js HTML5炫酷幻灯片

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangweiscsdn/article/details/53839180

用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






展开阅读全文

没有更多推荐了,返回首页