jQuery-纵向时间轴

xyc

     官网中往往会用到时间轴的展示方式，今天咱们就来说下简单的纵向时间轴的实现代码。
     效果：
     
    css：
   

[CSS] 纯文本查看 复制代码

.about{width:648px;margin:40px auto 0 auto;}
.about_tit{font-size:18px;color:#d80017;margin-bottom:30px;}
.about_main{position:relative;padding-left:20px;overflow:hidden;}
.line{width:1px;height:100%;background-color:#999;position:absolute;left:26px;z-index:-1;}
.about_main ul li{padding-left:25px;font-size:14px;color:#333333;line-height:30px;margin-bottom:30px;background:url(../images/about_icon.png) left center no-repeat;}
.about_main ul li:last-child{margin-bottom:0px;}

   HTML：
   

[HTML] 纯文本查看 复制代码

<div class="about">
	<div class="about_tit">成长经历</div>
	<div class="about_main">

		<div class="line"></div>
		<ul>
			<li>
				2012年走进大学的校园
			</li>
			<li>
				2013-2014在学校学习各种语言
			</li>
			<li>
				2015年开始了对未来的无限憧憬
			</li>
			<li>
				2016年我毕业了，开始在互联网的职业生涯
			</li>
			
		</ul>
	</div>
</div>

    js代码：
   

[JavaScript] 纯文本查看 复制代码

var h = $(".about_main ul li:first-child").height()/2;<!--第一个li高度的一半-->
		var h1 = $(".about_main ul li:last-child").height()/2;<!--最后一个li高度的一半-->
		$(".line").css("top",h);
		$(".line").height($(".about_main").height()-h1-h);

   以上就是实现的全部代码了，如需源码，请点击》》 jQuery纵向时间轴.zip (44.65 KB, 下载次数: 0)

2021-7-19 16:48 上传

点击文件名下载附件
阅读权限: 90

范范

支持