前言
以前做類似時(shí)光軸的結(jié)構(gòu)，幾乎都是一條灰色線飛流直下，沒有盡頭。今天這個(gè)線條是從第一個(gè)圓點(diǎn)到最后一個(gè)圓點(diǎn)，那么問題來了，內(nèi)容的高度還不是固定的，線條的長度怎么確定？怎么就能剛剛好從第一個(gè)點(diǎn)到最后一個(gè)點(diǎn)首尾相連呢？這就是下面所要做的。
先看效果，如下圖：
思路：
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>就是這么帥，就是這么不要臉！寫多長都沒關(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>好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
