如何使用 HTML/CSS 和 javascript 模仿 Powerpoint 演示文稿的感觉
我正在查看 HTML5 演示文稿，想知道是否有人知道实际演示文稿是如何创建的。您可以放大和缩小并查看所有幻灯片。您还可以使用键盘进行导航。
这是带有幻灯片的网站：http://slides.html5rocks.com/#slide5
I was looking at an HTML5 presentation and was wondering if anybody knew how the actual presentation was created. You can zoom in and out and view all the slides. You can also navigate with your keyboard.
Here's the site with the slideshow: http://slides.html5rocks.com/#slide5
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
首先，它并不是真正模仿 PowerPoint。它超越了 PowerPoint。 :) 其次，它正在执行 URL 所暗示的内容：用 HTML 5 震撼您的世界。每张幻灯片都是 HTML 5 中可用的标记和 CSS（和 Javascript）的示例。要了解他们如何做到这一点的所有信息，请右键单击页面并选择“查看源代码”...它将向您显示所有标记和脚本等。
First of all, it's not really mimicking PowerPoint. It's surpassing PowerPoint. :) Second, it's doing what the URL implies: rocking your world with HTML 5. Each slide is an example of markup and CSS (and Javascript) available in HTML 5. To find out all about how they do it, right-click on the page and choose "View Source" ... it will show you all the markup and scripting etc.
您绝对可以按照 Robusto 的建议进行操作，查看源代码并从那里开始。
但您可能会发现通过访问 http://studio.html5rocks.com/# 更容易获得更精简的版本Deck 并从那里下载示例。它基本上是相同的东西，但具有更少的外部依赖性和更少的初始幻灯片，因此它可能更容易使用。基本上，将每张幻灯片的内容放在
中就像您在源代码中的四张示例幻灯片中看到的那样。
You can definitely do as Robusto suggests and view source and go from there.
But you might find it easier to get a more stripped version by going to http://studio.html5rocks.com/#Deck and downloading the sample from there. It's the same thing basically but has fewer external dependencies and fewer initial slides so it might be easier to work with. Basically, put the content of each slide in a <div class="slide">...</div> the way you see it with the four sample slides in the source code.
有一个非常有用的 CSS3、HTML5 库，名为 impress.js，位于 http://bartaz.github.com/印象.js/
There is a very useful CSS3, HTML5 library called impress.js at http://bartaz.github.com/impress.js/