使用jquery去掉时光轴头尾部的线条

来源：动视网责编：小采时间：2020-11-27 20:19:40

使用jquery去掉时光轴头尾部的线条

使用jquery去掉时光轴头尾部的线条:一、前言：以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最后一个点首尾相连呢？这就是下面所要做的。

推荐度：

点击下载本文 文档为doc格式

导读使用jquery去掉时光轴头尾部的线条:一、前言：以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最后一个点首尾相连呢？这就是下面所要做的。

一、前言：以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最后一个点首尾相连呢？这就是下面所要做的。

二、先看效果，如下图：

三、思路：

　　1、写一个div包住整个内容，就能知道所有列表的总高度；

　　2、写一条细线定位到右边，对，高度100%，内容多高，细线就多高；

　　3、开始的小点距离顶部多高，细线就距离顶部多高；

　　4、使用js设置细线的高度 = 总高度 - 最后一个列表的高度；

　　！！！什么？？看不懂？？没关系，那我总结成一句话：细线的高度减掉最后一个内容的高度就刚刚好。

四、第一步：写结构

1 <div class="line_box">2 <div class="line"></div>3 <ul>4 <li><i></i>就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！<span></span></li>5 <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>6 <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>7 </ul>8 </div>

　　(1) 定一条灰色细线.line

　　(2) 每一个内容就是一个li

　　(3) i就是那个三角形(什么？？不会用CSS画三角形？百度一下，你就知道了)

　　(4) span 就是那个小红点

五、第二步：写样式

1 <style type="text/css">2 .line_box {width: 200px;margin: 0 auto;position: relative;}3 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}4 ul {padding-left: 20px;}5 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}6 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}7 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}8 </style>

　　(1) 好像没什么要说的。。

　　(2) 哈哈，想到了。画三角形的原理就是把一条边框设置为红色，其它三边都设置为透明，就像这样：

　　　　border-color:transparent red transparent transparent; 方向依次为上右下左

六、第三步：写js代码

 1 (function hei(){ 2 3 var li = $("li"), 4 len = li.length, 5 he = $(".line_box").outerHeight(), 6 old = li.eq(len - 1).outerHeight(); 7 8 $(".line").height( Number(he) - Number(old) ); 9 10 }());

　　(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?1.1.11"></script>

　　完整的代码为：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .line_box {width: 200px;margin: 0 auto;position: relative;} 7 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;} 8 ul {padding-left: 20px;} 9 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}10 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}11 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}12 </style>13 </head>14 <body>15 <div class="line_box">16 <div class="line"></div>17 <ul>18 <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li>19 <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>20 <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>21 </ul>22 </div>23 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js?1.1.11"></script>24 <script>25 $(function(){26 27 (function hei(){28 29 var li = $("li"),30 len = li.length,31 he = $(".line_box").outerHeight(),32 old = li.eq(len - 1).outerHeight();33 34 $(".line").height( Number(he) - Number(old) );35 36 }());37 38 })39 40 </script>41 </body>42 </html>

使用jquery去掉时光轴头尾部的线条

推荐度：

点击下载本文 文档为doc格式

标签：直线 jQuery 利用jquery

热门焦点

使用jquery去掉时光轴头尾部的线条

使用jquery去掉时光轴头尾部的线条

使用jquery去掉时光轴头尾部的线条

最新推荐

猜你喜欢

热门推荐