jquery去掉時間軸頭尾線實例講解

本文主要為大家介紹了利用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中文網其他相關文章！