基于jQuery和CSS3制作响应式水平时间轴附源码下载


Posted in Javascript onDecember 20, 2015

我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴。

基于jQuery和CSS3制作响应式水平时间轴附源码下载

效果展示     源码下载

HTML

我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成。而div.events-content放置的是多个日期对应的事件节点,它又多个li元素组成,li元素里面可以放置图片文字等任意HTML内容。注意这两部分的html的li中都有data-date属性,它的值是一个日期,正是通过data-date属性将导航水平线与日期对应的事件内容关联起来的。

<section class="cd-horizontal-timeline"> 
 <div class="timeline"> 
  <div class="events-wrapper"> 
   <div class="events"> 
    <ol> 
     <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li> 
     <li><a href="#0" data-date="28/02/2014">28 Feb</a></li> 
     <!-- 多个日期 --> 
    </ol> 
    <span class="filling-line" aria-hidden="true"></span> 
   </div> <!-- .events --> 
  </div> <!-- .events-wrapper --> 
  <ul class="cd-timeline-navigation"> 
   <li><a href="#0" class="prev inactive">Prev</a></li> 
   <li><a href="#0" class="next">Next</a></li> 
  </ul> <!-- .cd-timeline-navigation --> 
 </div> <!-- .timeline --> 
 <div class="events-content"> 
  <ol> 
   <li class="selected" data-date="16/01/2014"> 
    <h2>标题</h2> 
    <em>January 16th, 2014</em> 
    <p>  
     文字或者图片等任意HTML内容 
    </p> 
   </li> 
   <li data-date="28/02/2014"> 
    <!-- 对应日期的事件描述信息 --> 
   </li> 
   <!-- 多个日期事件 --> 
  </ol> 
 </div> 
</section>

CSS

来看时间轴事件的css设计,所有的事件节点初始都在视图之外,就是看不到的,除了.selected当前选中的日期节点。我们使用.enter-right/.enter-left来为事件节点进入视图时添加动画,使用.leave-right/.leave-left来为事件节点离开视图时添加动画。本例运用了很多CSS3动画效果,请看代码:

.cd-horizontal-timeline .events-content { 
 position: relative; 
} 
.cd-horizontal-timeline .events-content li { 
 position: absolute; 
 z-index: 1; 
 width: 100%; 
 left: 0; 
 top: 0; 
 transform: translateX(-100%); 
 opacity: 0; 
 animation-duration: 0.4s; 
 animation-timing-function: ease-in-out; 
} 
.cd-horizontal-timeline .events-content li.selected { 
 /* visible event content */ 
 position: relative; 
 z-index: 2; 
 opacity: 1; 
 transform: translateX(0); 
} 
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right { 
 animation-name: cd-enter-right; 
} 
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left { 
 animation-name: cd-enter-left; 
} 
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left { 
 animation-direction: reverse; 
} 
@keyframes cd-enter-right { 
 0% { 
 opacity: 0; 
 transform: translateX(100%); 
 } 
 100% { 
 opacity: 1; 
 transform: translateX(0%); 
 } 
} 
@keyframes cd-enter-left { 
 0% { 
 opacity: 0; 
 transform: translateX(-100%); 
 } 
 100% { 
 opacity: 1; 
 transform: translateX(0%); 
 } 
}

JS

在main.js中,根据每两个日期之间间隔的长短来调整日期导航条上两个日期节点的距离,当然要设置一个最小值(px),以及根据data-date属性获取日期,并将日期做格式化处理。使用jQuery实现点击左右导航按钮来实现事件内容的滑动效果,具体代码由于比较多,就不在这里占用篇幅了,请大家下载源码查看main.js里的代码详情,不做任何修改直接可以拿去应用到你的项目中去。

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
jQuery mobile 移动web(4)
Dec 20 #Javascript
基于jQuery实现放大镜特效
Oct 19 #Javascript
jQuery mobile 移动web(6)
Dec 20 #Javascript
jquery mobile 移动web(5)
Dec 20 #Javascript
js倒计时抢购实例
Dec 20 #Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 #Javascript
js实现无缝滚动特效
Dec 20 #Javascript
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP实现倒计时功能
2020/11/16 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python图像处理入门(一)
2019/04/04 Python
python中的print()输出
2019/04/12 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
员工安全生产责任书
2014/07/22 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
检讨书格式
2015/01/23 职场文书
晚会开幕词范文
2016/03/04 职场文书
数据库连接池
2021/04/06 MySQL