本文介绍了一位后端开发者如何基于三生石博主的时光轴设计，实现了一个增强版的纯手工垂直时光轴，兼容多种浏览器，包括Firefox、Chrome等，但IE8及以下可能存在兼容问题。时光轴的实现涉及布局、缩放、CSS3旋转动画、HTML5视频嵌入以及迷你时间菜单。作者强调了自己动手的好处，提供了源码下载链接。
前言
由于工作中需要，系统中需要记录不同时间发生的事件，为了提升用户体验，决定用时光轴来实现。[据说这个东西挺火的，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的旋转，代码如下&#
最低0.47元/天 解锁文章
扫一扫
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
