基于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中this的使用说明
Sep 06 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php去除字符串换行符示例分享
2014/02/13 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
使用正则替换变量
2007/05/05 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript控制台详解
2015/06/25 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
django中使用vue.js的要点总结
2019/07/07 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
房产委托公证书样本
2014/04/04 职场文书
房屋买卖协议书
2014/04/10 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
专题组织生活会方案
2014/06/15 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
公司员工离职证明书
2014/10/04 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript