HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

 前言

  由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现。[据说这个东西挺火的,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
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值