7 个漂亮的 JavaScript 时间轴组件推荐

时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。本文介绍 7 个漂亮的时间轴组件，它们使用 JavaScript 和 CSS 开发。

1. Simile Widgets

使用这个小工具，你可以创造出漂亮的交互式时间轴，就像下面这个。试试水平拖动它或者使用你的鼠标滚轮。点击某个事件可以看到更多的细节。

Simile Widgets 演示

2. Timeglider

Timeglider JS是一个支持数据缩放、平移的时间轴组件，使用 JavaScript 编写，常用于历史项目、项目计划等。该时间轴可以通过拖动右边的垂直栏进行缩放：向上拖动是放大（较少时间显示），向下则是缩小（显示更多时间）。同样也可以使用鼠标滚轮进行控制。

Timeglider 演示

3. Woorktuts

Woorktuts 演示

4. Tiki Toki

TikiToki是一个Web应用程序，使用它可以非常容易地在浏览器中创建交互式多媒体时间轴。在TikiToki时间轴中可以嵌入图像、文本，甚至是视频（YouTube、Vimeo及AVI格式）。

Tiki Toki 演示

5. Google 10 Year Timeline

Google 10 Year Timeline 演示

6. Bluelinemedia Timeline

Bluelinemedia Timeline 演示

7. Pure Css Timeline

简单、清爽的时间轴，使用一些逐次上升的线框来进行描述。这里没有使用 CSS 和 HTML，但是依然很漂亮。

Pure Css Timeline 演示

• 作者：Webdeveloperjuice
• 原文：《7 Beautiful Web Based Timeline Using Javascript and CSS》
• 翻译：luiang1018
• 翻译原文：《7 个漂亮的JavaScript时间轴组件推荐》

转载于:https://my.oschina.net/yaohaixiao/blog/123070