HTML5+CSS3+Jquery實現純手工的垂直時光軸【附源碼】

 前言

　　因爲工做中須要，系統中須要記錄不一樣時間發生的事件，爲了提高用戶體驗，決定用時光軸來實現。[聽說這個東西挺火的，QQ空間和FB都在用...]

這個時光軸是在 三生石上 這位博主的時光軸基礎上修改的，能夠稱之爲加強版吧！

兼容性

　　Firefox、chrome、360急速、360安全瀏覽器、IE8，其餘的沒測試，不過IE上的兼容有些問題。

效果預覽

操做演示

實現過程

　　我是作後端的，因此，頁面設計的並非很好看來着。你們能夠本身修改頁面。

　　一、佈局

　　頁面佈局很少說了，就是純DIV+CSS實現的，沒有什麼特殊的。在每個時間軸的節點上，有一個大的DIV層 (id=content201301) ,這裏content是固定字段，後面的是這個節點的年月，這部分是實現點擊左上角的年月能夠自動定位到這個DIV高度的。 另外這種拼接方式也方便以後的後臺套用模板。而後，這個大的DIV層裏面有若干小的DIV層(Id=divCount)，這裏的ID是固定了，用來存放內容，另外給這些層添加浮動float:left效果。

　　二、縮放

　　接下來是實現收縮，縮放功能用了jQuery的slideDown()、slideUp()方法，進行了一下簡單的縮放動畫。

　　三、時間節點上的圖標動畫

　　這個圖標使用了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         }

　　這樣，兩個連貫的動畫，基本上就實現了。很簡單把。

　　四、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> 

　　五、左上角的迷你時間菜單

　　這部分不細說了，一筆帶過了。這個迷你的時間軸，就是嵌套的兩個Ul作成的菜單，設置樣式還有使用jQuery的動畫方法就能完成，仍是不太明白的話，源碼裏面也寫了，也加了註釋。

後記

　　剛開始決定寫時光軸的時候，在網上處處找jQuery插件，後來在三生石的博客裏面看見了他寫的文章，點醒了我，這種功能，徹底能夠本身純手寫的，動畫並不複雜，並且網上的jQuery插件有的太臃腫。結果，一上午就寫完了，事實證實，靠本身仍是行的通的！

　　因爲這個模塊是本身徹底手寫的，從此須要修改，能夠很方便進行修改！要是用的網上的jQuery的插件，那可就慘了...

相關資源

HTML5+CSS3+Jquery實現純手工的垂直時光軸【威力加強版】：http://download.csdn.net/detail/a406502972/8021863

Github地址：https://github.com/CBDlkl/TimeAxis

注：解壓密碼：HTML5