当前位置：首页 > 技术博客 > HTML > CSS / JavaScript 响应式时间轴特效

CSS / JavaScript 响应式时间轴特效

4年前 (2021-12-15)HTML928

网上有个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>