CSS / JavaScript 响应式时间轴特效
网上有个VUE版本的，这是一个朋友找我写的jQuery版本【原创】，分享一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css+js响应式时间轴特效</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body{background-color:#f5f4f4}.ui-timeLine{padding:50px 0;position:relative;overflow:hidden}.ui-timeLine>.item{display:block;position:relative;text-align:justify;text-justify:newspaper;word-break:break-all;padding-left:50px;color:#fff;padding-right:10px}.ui-timeLine>.item>.box{padding:5px 0}.ui-timeLine>.item .cbox{position:relative;left:100vw;transition:left 1s;padding:10px;border-radius:10px;background-image:linear-gradient(45deg,rgba(0,200,255,0.4) 0,rgba(132,43,171,0.4) 100%);box-shadow:3px 3px 8px #ccc}.ui-timeLine>.item::after{content:"";display:block;clear:both}.ui-timeLine .dot{z-index:100;display:inline-block;position:absolute;left:25px;top:0;padding:3px;border:3px solid #eee;border-radius:20px;background-color:#fff;box-shadow:3px 3px 8px #ccc;transition:.5s}.ui-timeLine .active{border:3px solid rgba(132,43,171,.8)}.ui-timeLine .line,.ui-timeLine>.activeLine{position:absolute;left:29px;width:4px;height:100%;background-color:#eee}.ui-timeLine .date{font-size:14px;font-weight:900}.ui-timeLine .title{font-size:16px;font-weight:900;line-height:30px}.ui-timeLine .types>span{font-size:10px;border-radius:5px;padding:2px 10px;margin-right:10px;border:1px solid #fff}.ui-timeLine>.activeLine{background-color:rgba(0,200,255,.8);z-index:50;top:50px;height:0;max-height:calc(100% - 80px);transition:height 1s;box-shadow:3px 3px 2px #eee}
</style>
</head>
<body>
<div class="ui-timeLine">
<div class="activeLine"></div>
</div>
<script>
let timeLinecenter = [
{
date : '2020-02-05',
title : '这是标题1',
types : '类型1'
},
{
date : '2020-03-15',
title : '这是标题2',
types : '类型2'
},
{
date : '2020-04-25',
title : '这是标题3',
types : '类型3'
},
{
date : '2020-05-11',
title : '这是标题4',
types : '类型4'
},
{
date : '2020-05-05',
title : '这是标题5',
types : '类型5'
},
{
date : '2020-09-05',
title : '这是标题6',
types : '类型6'
},
{
date : '2021-09-05',
title : '这是标题7',
types : '类型7'
},
{
date : '2021-11-09',
title : '这是标题8',
types : '类型8'
},
{
date : '2021-11-15',
title : '这是标题9',
types : '类型9'
},
{
date : '2021-12-05',
title : '这是标题10',
types : '类型10'
},
{
date : '2021-12-15',
title : '这是标题11',
types : '类型11'
},
//只要你有足够的需求，可以一直无限的写下去
];
var jsonLength = 0;
for(var item in timeLinecenter){
jsonLength++;
}
for(i=0; i<jsonLength; i++){
var TtimeLinecenter = "<a class='item'><div class='line'></div><div class='dot'></div><div class='box'><div class='cbox'>" + timeLinecenter[i].date + "<div class='date'></div><div class='title'>" + timeLinecenter[i].title + "</div><div class='types'><span>" + timeLinecenter[i].types + "</span></div></div></div></a>";
$(".ui-timeLine").prepend(TtimeLinecenter);
}
(function($) {
$.fn.uiTimeLine = function () {
var $timeLine = $(".ui-timeLine");
var $activeLine = $(".ui-timeLine .activeLine");
var $dots = $(".ui-timeLine .dot");
var $cboxs = $(".ui-timeLine .item .cbox");
this.each(function() {
function setActiveLineHeight() {
let height = $(document).scrollTop() + window.screen.height;
let j = 0;
for (let i = 0; i < $dots.length; i++) {
if ($($dots[i]).offset().top < height) {
$($($dots[i])).addClass("active");
$($cboxs[i]).css({
"left": 0
});
j = i;
} else {
$($($dots[i])).removeClass("active")
$($cboxs[i]).css({
"left": "100vw"
});
}
}
$activeLine.css({
"height": $($dots[j]).offset().top - $timeLine.offset().top + 40 + "px"
})
}
$(window).on('scroll', setActiveLineHeight);
setActiveLineHeight();
})
}
})(jQuery);
$(".ui-timeLine").uiTimeLine();
</script>
</body>
</html>版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
