Rumah >hujung hadapan web >tutorial js >使用jquery去掉时光轴头尾部的线条

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

巴扎黑asal: 2017-06-26 14:35:261287semak imbas

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

二、先看效果，如下图：

三、思路：

　　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：

　　完整的代码为：

 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>

Atas ialah kandungan terperinci 使用jquery去掉时光轴头尾部的线条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery页面水印插件，支持多行水印、行错开Artikel seterusnya：Jquery Table 的基本操作

Artikel berkaitan

Lihat lagi