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

本文介绍 8 个漂亮的时间轴组件,它们使用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,但是依然很漂亮。 

演示 

 

8. WP JQuery Timelinr

jQuery Timelinr 用来加强时间表的显示,支持水平和垂直的布局,下载: wp-jquery-timelinr

在线演示:
http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
http://www.csslab.cl/ejemplos/timelinr/latest/vertical.html

 

Via  Webdeveloperjuice 

10个jquery时间轴插件

15个难忘的jQuery的时间轴插件