基于jQuery和CSS3制作响应式水平时间轴

我们经常看到有很多纵向的时间线用来记录事件的进展，但是有朋友让我分享横向的时间线。其实水平时间轴的难点在于自适应屏幕大小。所以我今天要和大家分享的是一个支持响应和滑动触摸屏手势的水平时间轴。

下载效果显示源代码。

超文本标记语言

我们的HTML结构由两部分组成。div.timeline用于放置日期导航的水平线。它由水平div.events-wrapper和水平导航按钮ul.cd-timeline-navigation组成。而div.events-content包含多个日期对应的事件节点，由多个li元素组成，其中可以放置图片、文本等任何HTML内容。注意这两部分的html的li中的data-date属性，它的值是一个日期。正是通过数据-日期属性，导航范围与日期对应的事件内容相关联。

section class=' CD-horizontal-timeline ' div class=' timeline ' div class=' events-wrapper ' div class=' events ' ol lia href=' # 0 ' data-date=' 16/01/2014 ' class=' selected ' 16 Jan/a/li lia href=' # 0 ' data-date=' 28/02/2014 ' 2月28日/a/Li！-多个日期-/ol span class='填充线' aria-hidden=' true'/span/div！- .事件- /div！- .events-wrapper-ul class=' CD-timeline-navigation ' lia href=' # 0 ' class=' prev inactive ' prev/a/Li lia href=' # 0 ' class=' next ' next/a/Li/ul！- .CD-时间轴-导航- /div！-.timeline-div class=' events-content ' ol Li class=' selected ' data-date=' 16/01/2014 ' H2 title/h2em 2014年1月16日/em pAny文本或图片等HTML内容/p/li lidata-date=' 28/02。-对应日期的事件描述信息- /li！-多个日期事件-/ol/div/sectioncss。

查看时间线事件的css设计，除了当前由选择的日期节点之外，所有事件节点最初都是不可见的。选中。我们用。enter-right/。当事件节点进入视图时，按enter-left添加动画。向左-向右/。left-left用于在事件节点离开视图时添加动画。这个例子使用了大量的CSS3动画效果，请看代码：CD-水平-时间线。事件-内容{ position: relative} .CD-水平-时间线。事件-内容li { position: absolutez-index : 1；宽度： 100%；left : 0；top : 0；transform : translateX(-100%)；opa city 3360 0；动画-时长0.4s动画-计时-功能：轻松进入；} .CD-水平-时间线。events-content li.selected { /*可见事件内容*/position : relative；z-index : 2；opa city 3360 1；transform : translateX(0)；} .CD-水平-时间线。事件-内容Li . enter-右，CD-水平-时间线。events-content Li . left-right { animation-name : CD-enter-right；} .CD-水平-时间线。事件-内容li.enter-left，CD-水平-时间线。events-content Li . leaf-left { animation-name : CD-enter-left；} .CD-水平-时间线。事件-内容Li . left-右，CD-水平-时间线。events-content Li . left-left { animation-direction : reverse；} @关键帧CD-enter-right { 0% { opa city 3360 0；transform : translateX(100%)；} 100% { opa city 3360 1；transform : translateX(0%)；} } @关键帧CD-enter-left { 0% { opa city 3360 0；transform : translateX(-100%)；} 100% { opa city 3360 1；transform : translateX(0%)；} } JS

在main.js中，根据每两个日期之间的间隔来调整日期导航栏中两个日期节点之间的距离，当然也可以设置一个最小值(px)，根据data-date属性获取日期并格式化日期。使用jQuery通过点击左右导航按钮实现事件内容的滑动效果。由于具体代码很多，这里就不占篇幅了。请下载源代码，在main.js中查看代码的详细信息，并直接应用到您的项目中，无需任何修改。