本文主要為大家介紹了利用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>
登入後複製
###完整的程式碼為：###
- 就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！
- 没办法，就是这么帅，就是这么叼！
- 帅到自然醒，帅到闪到腰！
<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>
登入後複製
###相關推薦：###########angularjs實作時間軸效果分享############幾款Jquery實現的漂亮時間軸教學############關於時間軸的效果解析#######
以上是jquery去掉時間軸頭尾線實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
