jquery去掉時間軸頭尾線實例講解-js教程-PHP中文網

首頁

web前端

js教程

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

小云云

Jan 06, 2018 pm 01:33 PM

jquery尾部線條

本文主要為大家介紹了利用jquery實現去掉時光軸頭尾部線條的方法，文中給出了詳細的實例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。希望能幫助大家。

前言

以前做類似時光軸的結構，幾乎都是一條灰色線飛流直下，沒有盡頭。今天這個線條是從第一個圓點到最後一個圓點，那麼問題來了，內容的高度還不是固定的，線條的長度怎麼確定？怎麼就能剛好從第一個點到最後一個點首尾相連呢？這就是下面要做的事。

先看效果，如下圖：

想法：

　　1、寫一個p包住整個內容，就能知道所有清單的總高度；

　　2、寫一條細線定位到右邊，對，高度100%，內容多高，細線就多高；

　　3、開始的小點距離頂部多高，細線就距離頂部多高；

　　4、使用js設定細線的高度= 總高度- 最後一個列表的高度；

　　！！！什麼？？看不懂？？沒關係，那我總結成一句話：細線的高度減掉最後一個內容的高度就剛好。

實作方法

第一步：寫結構

<p>
  </p><p></p>

就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！
没办法，就是这么帅，就是这么叼！
帅到自然醒，帅到闪到腰！

　　(1) 定一條灰色細線.line

　　(2) 每一個內容就是一個li

　　(3) i就是那個三角形(什麼？？不會用CSS畫三角形？百度一下，你就知道了)

　　(4) span 就是那個小紅點

第二步：寫樣式

<style>
 .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></script>

###完整的程式碼為：###

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<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> 
</head> 
<body> 
<p> 
 <p></p> 
 <ul> 
  <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li> 
  <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li> 
  <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li> 
 </ul> 
</p> 
<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> 
</body> 
</html>

###相關推薦：###########angularjs實作時間軸效果分享############幾款Jquery實現的漂亮時間軸教學############關於時間軸的效果解析#######

以上是jquery去掉時間軸頭尾線實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。