基于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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
js计算页面刷新的次数
Jul 20 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
Three.js加载外部模型的教程详解
Nov 10 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python实现控制台进度条功能
2016/01/04 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
怎样写留学自荐信
2013/11/11 职场文书
安全检查验收制度
2014/01/12 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang