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