jquery去掉时间轴头尾部线条实例讲解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery去掉时间轴头尾部线条实例讲解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3975字，纯文字阅读大概需要6分钟。
内容图文
本文主要给大家介绍了利用jquery实现去掉时光轴头尾部线条的方法，文中给出了详细的实例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。希望能帮助到大家。前言
以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最后一个点首尾相连呢？这就是下面所要做的。
先看效果，如下图：
思路：
1、写一个p包住整个内容，就能知道所有列表的总高度；
2、写一条细线定位到右边，对，高度100%，内容多高，细线就多高；
3、开始的小点距离顶部多高，细线就距离顶部多高；
4、使用js设置细线的高度 = 总高度 - 最后一个列表的高度；
！！！什么？？看不懂？？没关系，那我总结成一句话：细线的高度减掉最后一个内容的高度就刚刚好。
实现方法
第一步：写结构
<p class="line_box"> <p class="line"></p> <ul> <li><i></i>就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！<span></span></li> <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li> <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li> </ul> </p>
(1) 定一条灰色细线.line
(2) 每一个内容就是一个li
(3) i就是那个三角形(什么？？不会用CSS画三角形？百度一下，你就知道了)
(4) span 就是那个小红点
第二步：写样式
<style type="text/css">
.line_box {width: 200px;margin: 0 auto;position: relative;}
.line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
ul {padding-left: 20px;}
li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
</style>(1) 好像没什么要说的。。。
(2) 哈哈，想到了。画三角形的原理就是把一条边框设置为红色，其它三边都设置为透明，就像这样：
border-color:transparent red transparent transparent; 方向依次为 上 右 下 左
第三步：写js代码
(function hei(){
var li = $("li"),
len = li.length,
he = $(".line_box").outerHeight(),
old = li.eq(len - 1).outerHeight();
$(".line").height( Number(he) - Number(old) );
}());(1) 获取最外层的高度he
(2) 再获取最后一个内容的高度old
(3) 最总的高度就是(1) - (2)
(4) 这里之所以用outerHeight(),就是想把padding和border的高度也算进来
总结：
本次使用的是总高度减去最后一个内容的高度来算出细线的高度，当然还有其它的办法，不过最好还是加个resize监听浏览器变化就重新设置细线的高度就比较完善了。
这里使用百度CDN：
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
完整的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.line_box {width: 200px;margin: 0 auto;position: relative;}
.line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
ul {padding-left: 20px;}
li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
</style>
</head>
<body>
<p>
<p></p>
<ul>
<li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li>
<li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>
<li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>
</ul>
</p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
(function hei(){
var li = $("li"),
len = li.length,
he = $(".line_box").outerHeight(),
old = li.eq(len - 1).outerHeight();
$(".line").height( Number(he) - Number(old) );
}());
})
</script>
</body>
</html>相关推荐：
angularjs实现时间轴效果分享
几款Jquery实现的漂亮时间轴教程
关于时间轴的效果解析
以上就是jquery去掉时间轴头尾部线条实例讲解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jquery去掉时间轴头尾部线条实例讲解全部内容，希望文章能够帮你解决jquery去掉时间轴头尾部线条实例讲解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。