7個漂亮的JavaScript時間軸元件推薦

發表於2011-09-30

注:本文轉載自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,但是依然很漂亮。

演示

相關文章