溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用jquery去掉時(shí)光軸頭尾部線條

發(fā)布時(shí)間：2021-07-26 09:19:47 來源：億速云 閱讀：137 作者：小新 欄目：web開發(fā)

小編給大家分享一下如何使用jquery去掉時(shí)光軸頭尾部線條，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

先看效果，如下圖：

如何使用jquery去掉時(shí)光軸頭尾部線條

思路：

　　1、寫一個(gè)div包住整個(gè)內(nèi)容，就能知道所有列表的總高度；

　　2、寫一條細(xì)線定位到右邊，對(duì)，高度100%，內(nèi)容多高，細(xì)線就多高；

　　3、開始的小點(diǎn)距離頂部多高，細(xì)線就距離頂部多高；

　　4、使用js設(shè)置細(xì)線的高度 = 總高度 - 最后一個(gè)列表的高度；

　?。。。∈裁?？？看不懂？？沒關(guān)系，那我總結(jié)成一句話：細(xì)線的高度減掉最后一個(gè)內(nèi)容的高度就剛剛好。

實(shí)現(xiàn)方法

第一步：寫結(jié)構(gòu)

<div class="line_box">
  <div class="line"></div>
  <ul>
   <li><i></i>就是這么帥，就是這么不要臉！寫多長(zhǎng)都沒關(guān)系，反正右邊線條會(huì)自適應(yīng)！<span></span></li>
   <li><i></i>沒辦法，就是這么帥，就是這么叼！<span></span></li>
   <li><i></i>帥到自然醒，帥到閃到腰！<span></span></li>
  </ul>
 </div>

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

　　(2) 每一個(gè)內(nèi)容就是一個(gè)li

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

　　(4) span 就是那個(gè)小紅點(diǎn)

第二步：寫樣式

<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) 哈哈，想到了。畫三角形的原理就是把一條邊框設(shè)置為紅色，其它三邊都設(shè)置為透明，就像這樣：

　　　　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) 再獲取最后一個(gè)內(nèi)容的高度old

　　(3) 最總的高度就是(1) - (2)

　　(4) 這里之所以用outerHeight(),就是想把padding和border的高度也算進(jìn)來

總結(jié)：

本次使用的是總高度減去最后一個(gè)內(nèi)容的高度來算出細(xì)線的高度，當(dāng)然還有其它的辦法，不過最好還是加個(gè)resize監(jiān)聽瀏覽器變化就重新設(shè)置細(xì)線的高度就比較完善了。

這里使用百度CDN：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

完整的代碼為：

<!DOCTYPE html>
<html lang="en">
<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>
<div class="line_box">
 <div class="line"></div>
 <ul>
  <li><i></i>就是這么帥，就是這么不要臉！就是這么帥，就是這么不要臉！<span></span></li>
  <li><i></i>沒辦法，就是這么帥，就是這么叼！<span></span></li>
  <li><i></i>帥到自然醒，帥到閃到腰！<span></span></li>
 </ul>
</div>
<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>

看完了這篇文章，相信你對(duì)“如何使用jquery去掉時(shí)光軸頭尾部線條”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手