jquery去掉時間軸頭尾線實例講解
- 小云云原創
- 2018-01-06 13:33:011378瀏覽
本文主要為大家介紹了利用jquery實現去掉時光軸頭尾部線條的方法，文中給出了詳細的實例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。希望能幫助大家。
前言
以前做類似時光軸的結構，幾乎都是一條灰色線飛流直下，沒有盡頭。今天這個線條是從第一個圓點到最後一個圓點，那麼問題來了，內容的高度還不是固定的，線條的長度怎麼確定？怎麼就能剛好從第一個點到最後一個點首尾相連呢？這就是下面要做的事。
先看效果，如下圖：
想法：
1、寫一個p包住整個內容，就能知道所有清單的總高度；
2、寫一條細線定位到右邊，對，高度100%，內容多高，細線就多高；
3、開始的小點距離頂部多高，細線就距離頂部多高；
4、使用js設定細線的高度= 總高度- 最後一個列表的高度；
！ ！ ！什麼？ ？看不懂？ ？沒關係，那我總結成一句話：細線的高度減掉最後一個內容的高度就剛好。
實作方法
第一步：寫結構
9a3b772af592cbd97df3864e894d786b 4932cd0e4246f1060d9ad3ec2e132eda94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6没办法，就是这么帅，就是这么叼！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6帅到自然醒，帅到闪到腰！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 94b3e26ee717c64999d7867364b1b4a3
(1) 定一條灰色細線.line
(2) 每一個內容就是一個li
(3) i就是那個三角形(什麼？？不會用CSS畫三角形？百度一下，你就知道了)
(4) span 就是那個小紅點
第二步：寫樣式
46d5fe1c7617e3914f214aaf043f4ccf
.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%;}
531ac245ce3e4fe3d50054a55f265927
(1) 好像沒什麼要說的。 。 。
(2) 哈哈，想到了。畫三角形的原理就是把一條邊框設定為紅色，其它三邊都設定為透明，就像這樣：
border-color:transparent red transparent transparent; 方向依序為上右下左
(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：###0f384ea6e94b217ed07230246ae7c49a2cacc6d41bbb37262a98f745aa00fbf0###完整的程式碼為：###
<!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