前言
由於工作中需要，系統中需要記錄不同時間發生的事件，為了提升用戶體驗，決定用時光軸來實現。[據說這個東西挺火的，QQ空間和FB都在用...]
這個時光軸是在 三生石上 這位博主的時光軸基礎上修改的，可以稱之為增強版吧！
兼容性
Firefox、chrome、360急速、360安全瀏覽器、IE8，其他的沒測試，不過IE上的兼容有些問題。
效果預覽
操作演示
實現過程
我是做后端的，所以，頁面設計的並不是很好看來着。大家可以自己修改頁面。
1、布局
頁面布局不多說了，就是純DIV+CSS實現的，沒有什么特殊的。在每一個時間軸的節點上，有一個大的DIV層 (id=content201301) ,這里content是固定字段，后面的是這個節點的年月，這部分是實現點擊左上角的年月可以自動定位到這個DIV高度的。 另外這種拼接方式也方便之后的后台套用模板。然后，這個大的DIV層里面有若干小的DIV層(Id=divCount)，這里的ID是固定了，用來存放內容，另外給這些層添加浮動float:left效果。
2、縮放
接下來是實現收縮，縮放功能用了jQuery的slideDown()、slideUp()方法，進行了一下簡單的縮放動畫。
3、時間節點上的圖標動畫
這個圖標使用了CSS3的旋轉，代碼如下：
1 ul.timeline li .number .hand_img 2 { 3 margin-top:3px; 4 cursor:pointer; 5 zoom:1; 6 -webkit-transition: -webkit-transform 0.8s ease-in; 7 -moz-transition:-moz-transform 0.8s ease-in; 8 -o-transition:-o-transform 0.8s ease-in; 9 transition:transform 0.8s ease-in; 10 } 11 12 .Rotation 13 { 14 -moz-transform:rotate(90deg); 15 -webkit-transform:rotate(90deg); 16 -o-transform:rotate(90deg); 17 transform:rotate(90deg); 18 filter: 19 progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 20 }
這樣，兩個連貫的動畫，基本上就實現了。很簡單把。
4、HTML5網頁視頻
由於可能會有視頻，所以就內嵌了一個HTML5的播放器，不過，這種播放器需要瀏覽器的支持！
這里使用了video.js這個HTML播放器，導入video.js 、video.css，具體配置，在源碼里面寫了。
1 <script src="video/video.js"></script> 2 <video id="video_2" class="video-js vjs-default-skin" controls preload="none" poster="video/Resources/3.png" width="640" height="364" data-setup='{"example_option":true}'> 4 <source src="video/Resources/3.mp4" type='video/mp4' /> 5 <track kind="captions" src="voideo/captions.vtt" srclang="en" label="English" /> 6 </video>
5、左上角的迷你時間菜單
這部分不細說了，一筆帶過了。這個迷你的時間軸，就是嵌套的兩個Ul做成的菜單，設置樣式還有使用jQuery的動畫方法就能完成，還是不太明白的話，源碼里面也寫了，也加了注釋。
后記
剛開始決定寫時光軸的時候，在網上到處找jQuery插件，后來在三生石的博客里面看見了他寫的文章，點醒了我，這種功能，完全可以自己純手寫的，動畫並不復雜，而且網上的jQuery插件有的太臃腫。結果，一上午就寫完了，事實證明，靠自己還是行的通的！
由於這個模塊是自己完全手寫的，今后需要修改，可以很方便進行修改！要是用的網上的jQuery的插件，那可就慘了...
相關資源
HTML5+CSS3+Jquery實現純手工的垂直時光軸【威力增強版】：http://download.csdn.net/detail/a406502972/8021863
Github地址：https://github.com/CBDlkl/TimeAxis
注：解壓密碼：HTML5