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

5440 查看

注:本文转载自iteye

时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记。

本文介绍7个漂亮的时间轴组件,它们使用JavaScript和CSS开发。

1. Simile Widgets

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

演示

2. Timeglider

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

演示

3. Woorktuts

演示

4. Tiki Toki

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

演示

5. Google 10 Year Timeline

演示

6. Bluelinemedia Timeline

演示

7. Pure Css Timeline

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

演示