如何使用jquery去掉時(shí)光軸頭尾部線條
小編給大家分享一下如何使用jquery去掉時(shí)光軸頭尾部線條，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，公司以成都做網(wǎng)站、成都網(wǎng)站建設(shè)、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶成百上千，涉及國(guó)內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專(zhuān)業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。
先看效果，如下圖：
思路：
1、寫(xiě)一個(gè)div包住整個(gè)內(nèi)容，就能知道所有列表的總高度；
2、寫(xiě)一條細(xì)線定位到右邊，對(duì)，高度100%，內(nèi)容多高，細(xì)線就多高；
3、開(kāi)始的小點(diǎn)距離頂部多高，細(xì)線就距離頂部多高；
4、使用js設(shè)置細(xì)線的高度 = 總高度 - 最后一個(gè)列表的高度；
?。?！什么？？看不懂？？沒(méi)關(guān)系，那我總結(jié)成一句話：細(xì)線的高度減掉最后一個(gè)內(nèi)容的高度就剛剛好。
實(shí)現(xiàn)方法
第一步：寫(xiě)結(jié)構(gòu)
- 就是這么帥，就是這么不要臉！寫(xiě)多長(zhǎng)都沒(méi)關(guān)系，反正右邊線條會(huì)自適應(yīng)！
- 沒(méi)辦法，就是這么帥，就是這么叼！
- 帥到自然醒，帥到閃到腰！
(1) 定一條灰色細(xì)線.line
(2) 每一個(gè)內(nèi)容就是一個(gè)li
(3) i就是那個(gè)三角形(什么？？不會(huì)用CSS畫(huà)三角形？百度一下，你就知道了)
(4) span 就是那個(gè)小紅點(diǎn)
第二步：寫(xiě)樣式
.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%;}
(1) 好像沒(méi)什么要說(shuō)的。。。
(2) 哈哈，想到了。畫(huà)三角形的原理就是把一條邊框設(shè)置為紅色，其它三邊都設(shè)置為透明，就像這樣：
border-color:transparent red transparent transparent; 方向依次為 上 右 下 左
第三步：寫(xiě)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)來(lái)
總結(jié)：
本次使用的是總高度減去最后一個(gè)內(nèi)容的高度來(lái)算出細(xì)線的高度，當(dāng)然還有其它的辦法，不過(guò)最好還是加個(gè)resize監(jiān)聽(tīng)瀏覽器變化就重新設(shè)置細(xì)線的高度就比較完善了。
這里使用百度cdn：
完整的代碼為：
.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%;}
重慶分公司
重慶分公司