jQuery-纵向时间轴 - 苏飞论坛

上传

点击文件名下载附件
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);

以上就是实现的全部代码了，如需源码，请点击》》 (, 下载次数: 0)