文档章节

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

前端巨浪
 前端巨浪
发布于 2013/04/16 11:28
字数 461
阅读 714
收藏 3

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

1. Simile Widgets

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

Simile-Widgets

Simile Widgets 演示

2. Timeglider

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

Timeglider

Timeglider 演示

3. Woorktuts

Woorktuts

Woorktuts 演示

4. Tiki Toki

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

Tiki-Toki

Tiki Toki 演示

5. Google 10 Year Timeline

Google-10-Year-Timeline

Google 10 Year Timeline 演示

6. Bluelinemedia Timeline

Bluelinemedia-Timeline

Bluelinemedia Timeline 演示

7. Pure Css Timeline

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

Pure-Css-Timeline

Pure Css Timeline 演示

本文转载自:http://www.webdeveloperjuice.com/2011/09/28/7-beautiful-web-based-timeline-using-javascript-and-css/

前端巨浪
粉丝 8
博文 48
码字总数 11690
作品 3
武汉
高级程序员
私信 提问
7 个漂亮的 JavaScript 的时间轴组件

时间轴:通过互联网技术,依据时间顺序,把一方面或多方面的 时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户;时间轴可以运用于不同领域,最大的作用就是把过去...

红薯
2011/09/29
10K
9
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
10个优秀的JavaScript Web UI库/框架推荐

在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率。 本文为你带来10款非常优秀的基于JavaScript的Web UI设计...

阿东2020
2013/07/04
643
3
15 个构建交互式图表的最佳 jQuery 插件

在这篇文章中,我们向你推荐 15 个图表库,包含从简单图表实现到高度复杂的交互式图表,希望你会喜欢。 1. Chart.js : Charting Library with HTML5 Canvas 使用HTML5 Canvas元素的Javascrip...

oschina
2013/06/22
10.9K
9
给开发者提供的 35 款 JavaScript 图形图表库

图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流...

oschina
2014/02/24
59.6K
13

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
3
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
6
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
3
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部