伸缩自如的时光轴实现
2016-05-01 11:18
323 查看
上回说到简单时间轴的实现,这一次针对上回的实现的时光轴,增加时光轴收起的功能。为了方便重用,我分离css样式和js。使用过程中主要注意一下尽量使用css定义的时光轴样式即可。
时光轴收起功能的实现过程可以查看 timeline.js 中的注释。注意timeline.js是基于jQuery的。
效果图如下:
时光轴展开:
收起第一个时光轴上的内容:
收起剩下两个时光轴:
时光轴的样式 timeline.css
收起时光轴的插件 timeline.js(BUG修复:1.修复了当时间轴上只有一个”时间点“,点击“收起”发生 后面一个时间轴与当前时间轴重叠的现象(解决方法:判断时间点的个数,予以对应操作);2.修复当时间轴上的“时间点”较少时,收起后,后一个时间轴与当前时间轴重叠的想象(解决方法:提前正确设置好收起后时间轴的高度,以免发生重叠现象):)
可以使用 如下js代码,对”收起“按钮的功能进行初始化,添加点击事件:
Demo案例 index.html
时光轴收起功能的实现过程可以查看 timeline.js 中的注释。注意timeline.js是基于jQuery的。
效果图如下:
时光轴展开:
收起第一个时光轴上的内容:
收起剩下两个时光轴:
时光轴的样式 timeline.css
.vertical-timeline { color: #FFF; font-family: "微软雅黑", "Microsoft YaHei"; position: relative; } .vertical-timeline-block { border-left: 2px solid #DDD; position: relative; padding-bottom: 30px; width: 100%; cursor: pointer; } /* 时间轴的左侧图标 */ .vertical-timeline-icon { width: 40px; height: 40px; border-radius: 20px; position: absolute; left: -22px; top: 10px; z-index: 1000; text-align: center; line-height: 40px; cursor: pointer; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; } .vertical-timeline-block:hover .vertical-timeline-icon { width: 50px; height: 50px; border-radius: 25px; line-height: 50px; left: -27px; box-shadow: 0 0 5px #CCC; font-size: 25px; } /* 时间轴的左侧图标的各种样式 */ .v-timeline-icon1 { background-color: #2aabd2; } .v-timeline-icon2 { background-color: #5cb85c; } .v-timeline-icon3 { background-color: #8c8c8c; } /* 时间轴的左侧图标上的序号*/ .vertical-timeline-icon i { font-style: normal; color: #FFF; } /* 时间轴上的具体内容 */ .vertical-timeline-content { background-color: #5bc0de; margin-left: 60px; padding: 20px 30px; border-radius: 5px; position: relative; } /* 时间轴上的具体内容左侧箭头 */ .vertical-timeline-content:before { content: ''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #5bc0de; border-left: 10px solid transparent; position: absolute; right: 100%; top: 20px; } /* 时间轴的具体内容的格式 */ .timeline-content { text-indent: 2em; } .time-more { overflow: hidden; } .time-more .time { float: left; line-height: 40px; display: inline-block; } .time-more .more { float: right; } .time-more .more a { display: inline-block; height: 20px; padding: 8px 15px; color: #FFF; text-decoration: none; font-size: 15px; } /* “更多信息”的风格 */ .more-style1 { border-radius: 5px; background-color: #565656; } .more-style1:hover { background-color: #696969; } .more-style2 { border-radius: 5px; background-color: #1AB394; } .more-style2:hover { background-color: #18A689; } .more-style3 { border-radius: 5px; background-color: #1C84C6; } .more-style3:hover { background-color: #1A7BB9; } /*时光轴对应的标题*/ .vtb-tit { padding: 0 10px; height: 50px; line-height: 50px; text-align: center; background-color: #1A7BB9; border-radius: 5px; position: absolute; left: -150px; top: 10px; } /*收起按钮的样式*/ .timeline-putAway { position: absolute; right: -80px; top: 10px; /*display: none;*/ } .putAway-btn { border: none; outline: none; height: 30px; padding: 8px 15px; color: #FFF; text-decoration: none; font-size: 15px; cursor: pointer; } .putAway-btn:hover { background-color: #2aabd2; }
收起时光轴的插件 timeline.js(BUG修复:1.修复了当时间轴上只有一个”时间点“,点击“收起”发生 后面一个时间轴与当前时间轴重叠的现象(解决方法:判断时间点的个数,予以对应操作);2.修复当时间轴上的“时间点”较少时,收起后,后一个时间轴与当前时间轴重叠的想象(解决方法:提前正确设置好收起后时间轴的高度,以免发生重叠现象):)
/** * Created by DreamBoy on 2016/4/30. */ $(function() { $.fn.initPutAway = function () { $(this).each(function() { initTimeLine(this); }); //对 每一个条时间轴上的“收起”按钮 初始化 function initTimeLine(putAwayBtn) { //对应时光轴上的“时间点” var timelineChild = $(putAwayBtn).parents('.vertical-timeline').children('.vertical-timeline-block'); //对应时光轴上的“时间点”个数 var len = timelineChild.length; //保存各“时间点”的高度 var hArr = []; //对应时光轴的总高度 var totalH = 0; for(var i = 0; i < len; i++) { hArr.push($(timelineChild[i]).outerHeight()); totalH += hArr[i]; } $(putAwayBtn).on('click', function () { if($(this).html() == "收起") { if(len > 1) { //要先判断是否有子元素可以收缩,如果没有的话,只是改变按钮的内容为“展开” //设置收起时间轴后时间轴的高度 var top = $(timelineChild[0]).css("top"); if(top == 'auto') { top = 20; } //需要设置收起后时光轴(vertical-timeline)的高度,并进行设置 //(因为子元素将进行position absolute定位,在父容器中不占位置。为使父容器撑开应该提前计算好高度并进行设置) var h1 = top + 50 * len; var h2 = $(timelineChild[0]).outerHeight(); var ph = h1 >= h2 ? h1 : h2; $(this).parents('.vertical-timeline').height(ph); //设置时间轴上各“时间点”收缩后的位置,根据top进行设置 var h = hArr[0]; $.each(timelineChild, function(i) { if(i == 0) { //不对时间轴上的第一个“时间点”进行position设置 $(this).css("z-index", 1000); } else { top += 50; var _this = $(this); // 注意:这里必须先将position设置为absolute。(因为设置了position为absolute,top属性设置才有效果) // 那么设置了position,同样就必须定义top属性的初始值, // 否则,会按默认没有top进行显示,为保证在开始移动前,它还在“原来”的地方,就需要计算它的top值。 _this.css({"position" : "absolute", "top" : h}); _this.animate({"top" : top}); _this.children(".vertical-timeline-content").animate({"opacity" : 0}, function() { $(this).css("display", "none"); //隐藏对应时间点的内容 }); h += hArr[i]; } }); } $(this).html("展开"); } else if($(this).html() == "展开"){ if(len > 1) { //要先判断是否有子元素可以展开,如果没有的话,只是改变按钮的内容为“收起” var top = totalH; for(var i = len - 1; i >= 0; i--) { if(i == 0) { //不对时间轴上的第一个“时间点”进行关于position操作 $(timelineChild[i]).css("z-index", 0); } else { top -= hArr[i]; var _this = $(timelineChild[i]); //_this.css({"position" : "absolute"}); _this.animate({"top" : top}); _this.children(".vertical-timeline-content").css("display", "block").animate({"opacity" : 1}); } } //设置展开时间轴之后时间轴的高度 $(this).parents('.vertical-timeline').height(totalH); } $(this).html("收起"); } }); } } });
可以使用 如下js代码,对”收起“按钮的功能进行初始化,添加点击事件:
$(function() { //进行初始化 $('.putAway-btn').initPutAway(); });
Demo案例 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时光轴</title>
<link rel="stylesheet" href="timeline.css">
<style>
.container {
width: 800px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical-timeline">
<div class="vtb-tit">
总时间点1
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">1</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style1"><a href="#">更多信息</a></span>
</p>
</div>
<div class="timeline-putAway">
<button type="button" class="putAway-btn">收起</button>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">2</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点2</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style2"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">3</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点3</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="timeline-content">我去吃了个午饭</p>
<p class="timeline-content">我去吃了个午饭</p>
<p class="timeline-content">我去吃了个午饭</p>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style3"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">4</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">5</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">6</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">7</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
</div>
<div class="vertical-timeline">
<div class="vtb-tit">
总时间点2
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">1</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style1"><a href="#">更多信息</a></span>
</p>
</div>
<div class="timeline-putAway">
<button type="button" class="putAway-btn">收起</button>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">3</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点3</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style3"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">4</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">5</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">6</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
</div>
<div class="vertical-timeline">
<div class="vtb-tit">
总时间点3
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">1</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style1"><a href="#">更多信息</a></span>
</p>
</div>
<div class="timeline-putAway">
<button type="button" class="putAway-btn">收起</button>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">2</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点2</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style2"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">3</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点3</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style3"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">4</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">5</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">6</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
</div>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="timeline.js"></script>
<script>
$(function() { //进行初始化 $('.putAway-btn').initPutAway(); });
</script>
</body>
</html>
相关文章推荐
- 算法复习之二叉树的遍历
- 深入理解Java内存模型——重排序
- 二叉树的顺序存储结构
- 堆栈
- HDU 1242 Rescue(图)
- linux shell 常用基本语法
- 【HUSTOJ】1004: 求商与余数
- 链栈
- MySql: AUTO_INCREMENT
- 20145233韩昊辰 第四次实验报告
- sql server中的 SET NOCOUNT ON 的含义
- JAVA设计模式之单例模式
- 非二叉树转二叉树的表示法
- java之StringBuffer的一些用法
- Problem O
- HDU 5756 ztr loves lucky numbers dfs
- Android学习系列一用按钮实现显示时间
- android多进程实验
- leetcode-107. Binary Tree Level Order Traversal II
- 计算机基础-Socket详解