当前位置：文江博客文章教程详情

TimelineJS 免费开源的时间轴插件

发布于 2019-06-08 23:18:43 字数 4303 浏览 4025 评论 0

TimelineJS 是一个开源库，可以帮助你创建精美、可交互的时间轴。它可以使用 Google 试算表或基于 JSON 的 REST 后端作为数据来源。它可以处理不同种类的内容，从多个来源获取媒体文件，包括：

Twitter
Google Plus
Flickr
Youtube , Vimeo , DailyMotion
Google Maps

时间线上可插入图片、视频（Youtube, Vimeo）、soundcloud、推特与维基百科辞条、谷歌地图等，由著名的 [Knight News Innovation Lab] 开发，因此很受新闻机构的欢迎。

开发背景

网络上有很多时间线工具，但他们几乎所有的眼睛都很难使用。创建在同一时间美丽和直观的用户的时间线。

TimelineJS 是一个杰出的时间线插件，能够支持图片、视频（Youtube, Vimeo）、soundcloud、推特与维基百科词条、谷歌地图等数据类型显示在时间轴上，未来将支持更多的媒体类型。

TimelineJS 让创建时间轴变得非常简单，添加一个谷歌 spreadsheet 或者 JSON 数据即可。

使用方法

简单使用

将嵌入的代码放置在你想要的时间线显示在 <body> 你的网站。见配置选项，可以在配置中设置什么样的完整列表。

<div id="timeline-embed"></div>
<script type="text/javascript">
  var timeline_config = {
    width:        '100%',
    height:       '600',
    source:       'path_to_json/or_link_to_googlespreadsheet',
    embed_id:       'timeline-embed',         //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
    start_at_end:     false,              //OPTIONAL START AT LATEST DATE
    start_at_slide:   '4',              //OPTIONAL START AT SPECIFIC SLIDE
    start_zoom_adjust:  '3',              //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
    hash_bookmark:    true,               //OPTIONAL LOCATION BAR HASHES
    font:         'Bevan-PotanoSans',       //OPTIONAL FONT
    debug:        true,               //OPTIONAL DEBUG TO CONSOLE
    lang:         'fr',               //OPTIONAL LANGUAGE
    maptype:      'watercolor',           //OPTIONAL MAP STYLE
    css:        'path_to_css/timeline.css',   //OPTIONAL PATH TO CSS
    js:         'path_to_js/timeline-min.js'  //OPTIONAL PATH TO JS
  }
</script>
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

高级用法

你也可以初始化一个新的时间线后，在 storyjs-embed.js 引入后调用 createStoryJS 方法。

createStoryJS({
  type:     'timeline',
  width:    '800',
  height:   '600',
  source:   'path_to_json/or_link_to_googlespreadsheet',
  embed_id:   'my-timeline'       // ID of the DIV you want to load the timeline into
});

这儿是一个完整的例子

<head>
  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- BEGIN TimelineJS -->
  <script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
  <script>
    $(document).ready(function() {
      createStoryJS({
        type:     'timeline',
        width:    '800',
        height:   '600',
        source:   'path_to_json/or_link_to_googlespreadsheet',
        embed_id:   'my-timeline'
      });
    });
  </script>
  <!-- END TimelineJS -->
</head>
<body>  
  <div id="my-timeline"></div>
</body>

加载文件

如果你喜欢，你可以从 KnightLab 的 CDN 加载 TimelineJS 所需的文件，上面的例子演示了如何使用 story-embed.js，这是最简单的方法来建立一个你自己的时间线，如果因为某些原因你需要控制你的时间表更细粒度的，JavaScript 和 CSS 文件加载。我们建议您从我们的 CDN 负载。

<!-- always load the CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css">
<!-- and then one of either -->
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/timeline.js"></script>
<!-- or -->
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js"></script>
<!-- but no need for both -->

如果你需要在你的服务器上的文件复制服务的全部内容，使用 /build/ 目录我们的 GitHub 库。如果你使用 story-embed.js 本地副本应自动加载其他时间从你的服务器资源。