7 个漂亮的JavaScript时间轴组件
时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记。
本文介绍 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
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2014-04-08 14:49:15
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!