伸缩自如的时光轴实现_样式改版
2016-05-01 23:37
375 查看
针对前几篇文章中实现的”伸缩自如“的时光轴，对时光轴的样式进行又一次修改，效果如下：
点击”收起“后：
修改后的 timeline.css，如下：
点击”收起“后：
修改后的 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;
}*/
/*时光轴对应的标题*/
.vtb-tit {
padding: 0 10px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #1A7BB9;
border-radius: 5px;
position: relative;
top: -5px;
}
/*收起按钮的样式*/
/*.timeline-putAway {
position: absolute;
right: -80px;
top: 10px;
}
.putAway-btn {
border: none;
outline: none;
height: 30px;
padding: 8px 15px;
color: #FFF;
text-decoration: none;
font-size: 15px;
cursor: pointer;
}*/
/*收起按钮的样式*/
.timeline-putAway {
position: absolute;
/*right: -80px;
top: 10px;*/
right: 5px;
top: -48px;
}
.putAway-btn {
border: none;
outline: none;
height: 30px;
padding: 8px 15px;
color: #FFF;
text-decoration: none;
font-size: 15px;
cursor: pointer;
background-color: #1A7BB9;
}
.putAway-btn:hover {
background-color: #2aabd2;
} 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>
<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> timeline.js/**
* Created by DreamBoy on 2016/5/1.
*/
$(function() {
$.fn.initPutAway = function () {
$(this).each(function() {
initTimeLine(this);
});
//对 每一个条时间轴上的“收起”按钮 初始化
function initTimeLine(putAwayBtn) {
var timeline = $(putAwayBtn).parents('.vertical-timeline');
//对应时光轴上的“时间点”
var timelineChild = timeline.children('.vertical-timeline-block');
//对应时光轴上的“时间点”个数
var len = timelineChild.length;
//保存各“时间点”的高度；//对应时光轴的总高度
var hArr = [], totalH;
$(putAwayBtn).on('click', function () {
if($(this).html() == "收起") {
if(len > 1) { //要先判断是否有子元素可以收缩，如果没有的话，只是改变按钮的内容为“展开”
for(var i = 0; i < len; i++) {
hArr[i] = $(timelineChild[i]).outerHeight();
}
totalH = timeline.outerHeight();
//设置收起时间轴后时间轴的高度
var top = $(timelineChild[0]).css("top");
if(top == 'auto') {
top = 70;
}
//需要设置收起后时光轴（vertical-timeline）的高度，并进行设置
//（因为子元素将进行position absolute定位，在父容器中不占位置。为使父容器撑开应该提前计算好高度并进行设置）
var h1 = top + 50 * len;
var h2 = totalH; //除去除第一个 时间点 的所有时间点高度
for(var i = 1; i < len; i++) {
h2 -= $(timelineChild[i]).outerHeight();
}
var ph = h1 >= h2 ? h1 : h2;
timeline.outerHeight(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;
//设置展开时间轴之后时间轴的高度
timeline.outerHeight(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.animate({"top" : top});
//判断是否是最后一个，如果是的话负责把 timeline时间轴 的高度设置为 100%，达到自适应的效果
if(i == 1) {
_this.children(".vertical-timeline-content").css("display", "block").animate({"opacity" : 1}, function() {
//修改为 relative 定位，方便“占位”。
$(this).parents('.vertical-timeline-block').css({"position": "relative", "top" : 0});
timeline.outerHeight("100%");
});
} else {
_this.children(".vertical-timeline-content").css("display", "block").animate({"opacity" : 1}, function() {
//修改为 relative 定位，方便“占位”。
$(this).parents('.vertical-timeline-block').css({"position": "relative", "top" : 0});
});
}
}
}
}
$(this).html("收起");
}
});
}
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 