Html5 jQuery时光轴设计插件源代码下载

分享一款jQuery垂直时间轴样式、代码非常简洁并非常实用、Demo是一个Html的jQuery时间轴、无论li内容多少、直线都不会超出、并且红点永远居中的、jQuery代码已经封装好咯、只需要简单的引入即可、非常棒吧、效果图片如下

HTML代码

<div class="about4">
    <div class="about4_ch">成长经历</div>
    <div class="about4_main">

        <div class="line"></div>
        <ul>
            <li>
                2011年走进大学的校园
            </li>
            <li>
                2011-2013在学校获得了各种奖项
            </li>
            <li>
                2014年我对大学的想法有了本质的转变
            </li>
            <li>
                2015年我毕业了，开始在互联网的浪潮中艰难生存
            </li>
            <li>
                无论li内容多少，直线都不会超出，并且红点永远居中的
            </li>
        </ul>
    </div>
</div>

jQuery代码

<script type="text/javascript">
$(document).ready(function(e) {
    var h = $(".about4_main ul li:first-child").height()/2;<!--第一个li高度的一半-->
    var h1 = $(".about4_main ul li:last-child").height()/2;<!--最后一个li高度的一半-->
    $(".line").css("top",h);
    $(".line").height($(".about4_main").height()-h1-h);
});
</script>

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1ntVXdhf 密码: y6zy