基于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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
Cookie 小记
2010/04/01 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python yield使用方法示例
2013/12/04 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
机器学习实战之knn算法pandas
2019/06/22 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
会展中心部门工作职责
2013/11/27 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
社团活动策划书范文
2014/01/09 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL