Deck.js 开源项目使用教程

最新推荐文章于 2024-08-25 07:14:52 发布
最新推荐文章于 2024-08-25 07:14:52 发布
阅读量271 收藏 3
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00061/article/details/141119818
版权

Deck.js 开源项目使用教程

deck.jsModern HTML Presentations项目地址:https://gitcode.com/gh_mirrors/de/deck.js

目录结构及介绍

Deck.js 项目的目录结构如下：

deck.js/
├── boilerplate/
│   └── index.html
├── core/
│   ├── deck.core.css
│   ├── deck.core.js
│   └── ...
├── extensions/
│   ├── deck.menu.js
│   ├── deck.menu.css
│   └── ...
├── themes/
│   ├── css/
│   │   ├── web-2.0.css
│   │   └── ...
│   ├── images/
│   └── ...
├── README.md
└── ...
  • boilerplate/：包含一个基本的演示文稿模板文件 index.html。
  • core/：包含 Deck.js 的核心文件，如 deck.core.css 和 deck.core.js。
  • extensions/：包含各种扩展功能，如菜单、导航等。
  • themes/：包含不同的主题样式，如 web-2.0.css。
  • README.md：项目的说明文档。

项目的启动文件介绍

Deck.js 的启动文件是 boilerplate/index.html。这个文件是一个基本的演示文稿模板，包含了 Deck.js 的核心文件和一些示例内容。你可以通过编辑这个文件来创建你自己的演示文稿。

<!DOCTYPE html>
<html>
<head>
  <title>My Presentation</title>
  <link rel="stylesheet" href="../core/deck.core.css">
  <link rel="stylesheet" href="../themes/css/web-2.0.css">
  <script src="../jquery.min.js"></script>
  <script src="../modernizr.custom.js"></script>
  <script src="../core/deck.core.js"></script>
</head>
<body>
  <div class="deck-container">
    <section class="slide">
      <h1>My Presentation</h1>
    </section>
    <section class="slide">
      <h2>Slide Header</h2>
      <p>Here is a list of points:</p>
      <ul>
        <li>Point 1</li>
        <li>Point 2</li>
        <li>Point 3</li>
      </ul>
    </section>
    <section class="slide">
      <h2>Another Slide</h2>
      <blockquote cite="http://example.com">
        <p>Lorem ipsum dolor sit amet</p>
        <p><cite>Cicero</cite></p>
      </blockquote>
    </section>
  </div>
  <script>
    $(function() {
      $.deck('.slide');
    });
  </script>
</body>
</html>

项目的配置文件介绍

Deck.js 没有专门的配置文件，它的配置主要通过在 HTML 文件中引入不同的 CSS 和 JavaScript 文件来实现。例如，你可以通过引入不同的主题文件来改变演示文稿的外观，或者通过引入不同的扩展文件来添加额外的功能。

例如，要添加菜单功能，你需要引入 deck.menu.js 和 deck.menu.css：

<link rel="stylesheet" href="../extensions/menu/deck.menu.css">
<script src="../extensions/menu/deck.menu.js"></script>

通过这种方式，你可以根据需要灵活地配置和扩展你的演示文稿。

deck.jsModern HTML Presentations项目地址:https://gitcode.com/gh_mirrors/de/deck.js

殷巧或
关注
探索 Deck.js：一款强大的HTML5演示文稿框架
gitblog_00010的博客
03-21 368
探索 Deck.js：一款强大的HTML5演示文稿框架 deck.jsModern HTML Presentations项目地址:https://gitcode.com/gh_mirrors/de/deck.js 是一个开源项目，由 Benjamin Coe 创建，旨在提供一个基于现代Web技术的优雅、简洁且高度可定制的演示文稿制作工具。通过利用HTML、CSS和JavaScript的力量，De...
deck.js-template:deck.js-模板
04-30
＃deck.js 一个用于构建现代HTML演示文稿JavaScript库。 deck.js足够灵活，可以让高级CSS和JavaScript作者制作高度自定义的卡片组，还为HTML新手提供了模板和主题以构建标准幻灯片。 依赖关系（包含在此存储库中） 文献资料 请查看，以获取有关核心以及所有随附扩展中可用的方法，事件和选项的更多信息。 包装内的“ introduction文件夹下包括一个标准幻灯片样本示例。 您还可以在线以使用可用的样式和过渡主题。 扩展，主题和相关项目 看一下 ，了解扩展，主题和其他相关信息的列表。 如果您有自己的公开项目，请随时添加到列表中。 测试与支持 单元测试使用和编写。 您可以。 deck.js已通过jQuery 1.6+进行了测试，可在IE7 +，Chrome，FF，Safari和Opera中运行。 功能更强大的浏览器获得了更大的增强，但是基本的剖面幻灯片将适用
Deck.js 开源项目教程
gitblog_00123的博客
08-10 361
Deck.js 开源项目教程 deck.jsModern HTML Presentations项目地址:https://gitcode.com/gh_mirrors/de/deck.js 项目介绍 Deck.js 是一个用于创建现代 HTML 演示文稿的开源项目。它允许用户通过简单的 HTML 结构和 CSS 样式来构建交互式的幻灯片演示。Deck.js 支持多种浏览器，并且可以通过扩展和主题进...
deck.js
05-10 118
deck.js imakewebthings/deck.jsdeck.jsA JavaScript library for building modern HTML presentations. deck.js is flexible enough to let a...
Deck JS: HTML5 幻灯片
hack2me---Just for fun
09-02 871
Deck.js 是一组开源的 JavaScript 类库，方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片。 该软件十分适用于开源项目介绍，交互式的方式比单纯的文字说明更简洁易懂。 不废话了，赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧！ 项目主页及演示
前端项目-deck.js.zip
09-02
前端项目-deck.js,Modern HTML Presentations
Cards.js 开源项目教程
gitblog_01064的博客
08-25 241
Cards.js 开源项目教程 cards.jsJavascript library for card games.项目地址:https://gitcode.com/gh_mirrors/ca/cards.js 1. 项目的目录结构及介绍 Cards.js 项目的目录结构如下： cards.js/ ├── cards/ │ ├── demo/ │ ├── site/ │ ├── gi...
deck.gl-data：数据可视化库deck.gl示例的数据（https：uber.github.iodeck.gl＃）
02-05
3. **JavaScript 示例代码**：这些代码示例展示了如何使用 deck.gl API 将数据和图层配置集成到 web 应用中。它们可能包括设置地图上下文、加载数据、创建图层实例和附加到地图的步骤。 4. **README 或文档**：这些...
asciidoctor.js-reveal-demo:这是一个用于asciidoctor.js揭示.js和deck.js后端工作的共享存储库
05-22
asciidoctor.js-reveal-demo 是一个专门设计用于展示 Asciidoctor.js 与 reveal.js 或 deck.js 集成的项目。这个共享存储库提供了一个示例，演示了如何利用这两个强大的工具来创建交互式的、基于文本的演示文稿。 ...
slides-deck-js:使用deck.js完成的幻灯片
05-10
＃deck.js 一个用于构建现代HTML演示文稿JavaScript库。 deck.js足够灵活，可以让高级CSS和JavaScript作者制作高度自定义的卡片组，还为HTML新手提供了模板和主题，以构建标准幻灯片。 依赖关系（包含在此存储库中） 文献资料 请查看，以获取有关核心以及所有随附扩展中可用的方法，事件和选项的更多信息。 包装中的“ introduction文件夹下包括一个标准的标准滑板样板。 您还可以在线以使用可用的样式和过渡主题。 扩展，主题和相关项目 看一下 ，了解扩展，主题和其他相关信息的列表。 如果您有自己的公开项目，请随时添加到列表中。 测试与支持 单元测试使用和编写。 您可以。 deck.js已通过jQuery 1.6+进行了测试，可在IE7 +，Chrome，FF，Safari和Opera中运行。 功能更强大的浏览器获得了更大的增强，但是基本的剖面幻灯片将适
deck.js-base:一个带有一些花里胡哨的deck.js 的基本安装
06-09
介绍 这个 repo 为基于的幻灯片提供了一个起点。 它包括以下内容： 包含瑞士主题的核心deck.js 文件（截至2015-04-26 的） 甲板菜单扩展 带有和 PHP 和 HTML库 (1.1.9) 就像deck.js 本身一样，这个项目是在下获得。 基本设置 在您喜欢的文本编辑器中打开index.html 。 更新顶部的title标签值和meta标签属性值。 向下滚动到body标签内，找到id属性值为title-slide的div标签。 在该div标签中，更新h1和h2标签。 此时，您可以在浏览器中打开index.html并查看您的标题幻灯片。 如果要添加任何自定义 CSS，可以在css/deck.custom.css 。 它已经包含在index.html 。 这同样适用于自定义 JS 的js/deck.custom.js 。 index.html还包括与deck.js 捆绑
imakewebthings-deck.js
11-15
由于 **imakewebthings-deck.js** 是开源项目，因此它拥有活跃的社区支持和丰富的资源。开发者可以在GitHub上找到源代码、示例、文档以及社区提供的扩展和主题。这种开放性使得这个插件不断进化，适应不断变化的Web...
基于WebGL的地理大数据可视化：Uber的deck.gl框架的简介与使用
wxqqq666的博客
06-07 7119
var builddata; var building = new Array(); var buildobj ; $.getJSON("building-wgs84.json", function (data) { builddata = data; builddata.features.forEach(function...
基于WebGL的大数据二三维可视化--uber的deck.gl介绍
热门推荐
前端-后端学习之路
06-02 2万+
deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层，GPU渲染的高性能，React和Mapbox GL集成，结合地理信息数据（GPS）的特点。下面我们就举两个例子探索一下这个神奇的库。1.第一站：将源码的例子跑起来源码在github里，首先克隆出来。npm 下载，在项目根目录下npm install(友情提醒，如果npm下载速度比较慢，可以使用
使用deck.js制作幻灯片
FuDesign2008的专栏
10-12 3907
使用deck.js制作幻灯片 2011-08-31 20:13 今天，无意中发现一个非常好玩的JS组件deck.js。使用它可以轻松的制作出自己想要的网页版PPT。 官网：http://imakewebthings.github.com/deck.js/#intro （使
impress.js-前端PPT制作
u013783095的博客
12-03 2412
使用html+CSS+js制作PPT，应该是每个前端爱好者都觉得不同于其他开发者的一大亮点。 目前主流的框架有HTML5 Slides、Reveal.js 、Impress.js 、Deck.js 、HTML Slide Presentation 、CSSS 、Fathom.js 等，个人偏爱Impress.js。 Impress.js源码的GitHub地址 https://github.co...
考研复习-英语二真题考试题集-带答案
最新发布
09-14
英语二考研真题复习资料，带答案版
for (int i = 0; i < deck.size(); i++) { if (i % 3 == 0) { player1.add(deck.get(i)); } else if (i % 3 == 1) { player2.add(deck.get(i)); } else { player3.add(deck.get(i)); } }
06-03
具体来说，它使用了一个循环来遍历牌堆中的所有牌，对于每张牌，根据它在牌堆中的索引值来确定它应该发给哪个玩家。具体地，如果索引值 `i` 能被 3 整除，就将这张牌发给玩家 1，如果余数为 1，就将这张牌发给玩家 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

殷巧或

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值