使用jquery去掉時光軸頭尾端的線條
- 巴扎黑原創
- 2017-06-26 14:35:261281瀏覽
一、前言：以前做類似時光軸的結構，幾乎都是一條灰色線飛流直下，沒有盡頭。今天這個線條是從第一個圓點到最後一個圓點，那麼問題來了，內容的高度還不是固定的，線條的長度怎麼確定？怎麼就能剛好從第一個點到最後一個點首尾相連呢？這就是下面要做的事。
二、先看效果，如下圖：
三、思路：
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>###以上是使用jquery去掉時光軸頭尾端的線條的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn