Html5 jQuery时光轴设计插件源代码下载
2016-01-07 12:33:03  By: shinyuu

• shinyuu
• JQuery教程
• 2
• 5893
• 2

分享一款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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛