敢于直言批评你的人,定是你命中的贵人

简单的时间轴特效

js xiaoyun 380℃ 0评论

这个特效是仿站长之家,然后增加了自己的一点理解所写出来的,特色之处:

1、左边部分是固定的

2、点击的时候会跳转到右边相应的模块

3、右边的内容增加的时候,左边的内容也会跟着添加

可以作用的范围:

1、时间轴

2、提纲和内容

整个内容如下:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>时间轴</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
*{padding: 0;margin:0;}
.event-wrapper{
width: 520px;
margin:100px auto;
position: relative;
}
.event_year {
float: left;
width: 200px;
}

.event_year li {
list-style: none;
width: 100%;
line-height: 40px;
text-align: center;
}

.event_year .current,
.event_year li:hover {
background: pink;
float: left
}

.event_list {
float:right;
width: 300px;
}

.box {
width: 100%;
height: 500px;
border: 1px solid #ccc;
margin: 10px auto;
}
.fixed{top:0;position: fixed;}
</style>

<body>
<div class="event-wrapper">
<div class="event_year">
<ul class="year_list"></ul>
</div>
<div class="event_list">
<div class="box">
<h3>2017</h3></div>
<div class="box">
<h3>2016</h3></div>
<div class="box">
<h3>2015</h3></div>
<div class="box">
<h3>2014</h3></div>
<div class="box">
<h3>2013</h3></div>
<div class="box">
<h3>2012</h3></div>
<div class="box">
<h3>2011</h3></div>
</div>
</div>
<script>
$(function() {
// 遍历函数
$(".event_list .box").each(function(index, el) {
// 获取每个h3的值
var boxVal = $(".event_list .box h3").eq(index).html();
$(".event_list .box h3").eq(index).parent().attr({
id: boxVal
});
var cont = '<li class=' + boxVal + '>' + boxVal + '</li>'
$(".year_list").append(cont);

});
$('.year_list li').click(function() {
var year = $(this).attr('class');
console.log(year)
$('#' + year).prevAll('div').slideUp(800);
$('#' + year).slideDown(800).nextAll('div').slideDown(800);
});
// 部分固定
var eventTop=$(".event-wrapper").offset().top;
$(window).scroll(function(event) {
var sp=$(window).scrollTop()
if (eventTop<sp) {
$(".year_list").addClass('fixed')
}else{
$(".year_list").removeClass('fixed')
}
});
});
</script>
</body>

</html>

 

 

转载请注明:小云之家 » 简单的时间轴特效

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址