资讯频道 → Web前端
阅读更多

21顶
0踩

Web前端

翻译新闻 7 个漂亮的JavaScript时间轴组件推荐

2011-09-29 18:24 by 资深编辑 luiang1018 评论(4) 有49287人浏览
JavaScript Timeline Web
时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。

本文介绍 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，但是依然很漂亮。


演示

Via  Webdeveloperjuice
  • 大小: 32.7 KB
  • 大小: 33.8 KB
  • 大小: 32.6 KB
  • 大小: 82.5 KB
  • 大小: 74.4 KB
  • 大小: 35.5 KB
  • 大小: 22.4 KB
21
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 public2 2011-09-30 16:51
非常地好。以前用ext做过个，要早知道就好了
3 楼 ldbjakyo 2011-09-30 16:18
2 楼 jspc 2011-09-30 12:55
   这种的功能还是第一次见到，了解着，在项目中有需要的话，在查询。
谢谢分享 
1 楼 duanhengtao03 2011-09-30 12:00
顶，很好，留着以后用！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics