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

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

HTML代码

<div> <div>成长经历</div> <div> <div></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>

源代码下载链接: ?bdkey=s/1ntVXdhf 密码: y6zy

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

想获取DD博客最新代码、你可以、关注DD博客微信公众号（ddblogs）

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

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

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

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