【三石jQuery視頻教程】03.創(chuàng)建垂直時間表(Timeline)
來源：程序員人生 發(fā)布時間：2015-04-24 08:23:02 閱讀次數(shù)：5105次
視頻地址：http://v.qq.com/page/g/i/o/g0150rvi6io.html
大家好，歡迎來到【3石jQuery視頻教程】，我是您的老朋友 - 3生石上。
今天，我們要通過基本的HTML、CSS、jQuery來實現(xiàn)垂直時間表，先來看下終究的產(chǎn)品：
簡單起見，時間表中的每一個節(jié)點用1張圖片代替，實際利用中多是標題-圖片-正文的模樣。
Step1：網(wǎng)站目錄
網(wǎng)站目錄非常簡單，包括3部份：lesson3.html 文件、lib 目錄和 images 目錄。
其中 lesson3.html 包括了1個頁面最基本的組成部份，正確的設(shè)置 DOCTYPE 有助于頁面在現(xiàn)代閱讀器中正確渲染。
<!DOCTYPE html>
<html>
<head>
<title>03.創(chuàng)建垂直時間表(Timeline) - 3石jQuery視頻教程</title>
</head>
<body>
</body>
</html>
lib 目錄僅包括了最新的 jQuery 庫；images 目錄包括使用到的 9 張圖片?！?/p>
Step2：頁面結(jié)構(gòu)
為頁面添加基本的 html 標簽。
- 為了實現(xiàn)時間標簽的雙色背景，嵌套了兩層 div，分別用 CSS 樣式類 year 和 year-inner 來標示
- 時間表中的事件列表用 ul.events li 進行組織
- 最后給最外層的時間表節(jié)點定義樣式類 timeline
<!DOCTYPE html>
<html>
<head>
<title>03.創(chuàng)建垂直時間表(Timeline) - 3石jQuery視頻教程</title>
</head>
<body>
<div id="main">
<h2>
03.創(chuàng)建垂直時間表(Timeline) - 3石jQuery視頻教程
</h2>
<div class="timeline">
<div class="year">
<div class="year-inner">
2015
</div>
</div>
<ul class="events">
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
</ul>
<div class="year">
<div class="year-inner">
2014
</div>
</div>
<ul class="events">
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
<li>
<img src="images/7.jpg">
</li>
<li>
<img src="images/8.jpg">
</li>
<li>
<img src="images/9.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
此時的頁面顯示效果：
Step3：時間標簽的樣式
下面我們來創(chuàng)建時間標簽的樣式，為了實現(xiàn)雙色圓形背景，我們做了以下努力：
- 固定寬度和高度，并讓 border-radius 等于寬度和高度的 1/2 來實現(xiàn)圓形背景
- 兩個背景的色彩直接取自
FineUI（專業(yè)版）的版本更新頁面
- 為了讓時間標簽（2015）在 year-inner 中居中顯示，分別定義 line-height 和 text-align 屬性
- 為了讓 year-inner 在 year 中居中，我們使用了絕對定位（top:50%; margin-top:⑵5px;）的 CSS 小技能
<style>
body {
background-color: #efefef;
}
#main {
margin: 20px auto;
}
.timeline .year {
background-color: #AFDCF8;
width: 60px;
height: 60px;
border-radius: 30px;
position: relative;
margin: 0 auto 50px;
}
.timeline .year-inner {
background-color: #46A4DA;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
border-radius: 25px;
position: absolute;
top: 50%;
margin-top: ⑵5px;
left: 50%;
margin-left: ⑵5px;
}
.events img {
width: 100%;
}
</style>
此時的頁面顯示效果：
Step4：讓圖片左右顯示
為了讓圖片均勻的左右顯示，也就是1個左，1個右，然后再1個左，1個右，所以需要明確辨別奇數(shù)和偶數(shù)的 li 標簽，我們使用 jQuery 來完成這1任務(wù)：
<script src="lib/
jquery.js"></script>
<script>
$(function() {
$('.timeline .events li:nth-child(2n)').addClass('alt');
});
</script>
jQuery 的子選擇器 :nth-child(2n) 用來選擇列表中的偶數(shù)項，并添加樣式類 alt。
下面，我們通過 CSS 定義，左右兩側(cè)的圖片分別占據(jù) 40% 的寬度，也就是說中間預(yù)留了 20% 的寬度，用1個圖示來簡單說明：
使用 float 樣式來使圖片左右顯示，具體的 CSS 定義：
.timeline .events li {
width: 40%;
margin-bottom: 100px;
border: solid 1px #AFDCF8;
padding: 10px;
border-radius: 5px;
float: left;
clear: left;
}
.timeline .events li.alt {
float: right;
clear: right;
margin-top: 50px;
margin-bottom: 50px;
}
此時的頁面效果：
Step5：時間標簽后面的垂直背景線
本來我們可使用1個絕對定位的 div 節(jié)點來實現(xiàn)這個效果，不過更簡便的辦法是 :after 偽選擇器，先來看 CSS 定義：
.timeline {
overflow: hidden;
position: relative;
}
.timeline:after {
content: "";
position: absolute;
width: 6px;
height: 100%;
background-color: #AFDCF8;
top: 0;
left: 50%;
margin-left: ⑶px;
}
:after 偽選擇器用來在某個元素的內(nèi)容后面插入新的內(nèi)容：
- content 定義要插入的新內(nèi)容，這里我們不需要插入任何文本內(nèi)容，所以留空
- 將新內(nèi)容絕對定位，就和使用正常 div 節(jié)點1樣
- 為了讓垂直背景線水平居中顯示，我們一樣使用了前面提到的 top:50% + margin-top 的小技能
此時的頁面效果：
Step6：垂直背景線到圖片的連接線
使用類似的偽選擇器，我們很容易相對每一個 li 節(jié)點，定義連接線：
.timeline .events li {
width: 40%;
margin-bottom: 100px;
border: solid 1px #AFDCF8;
padding: 10px;
border-radius: 5px;
float: left;
clear: left;
position: relative;
}
.timeline .events li:after {
content: "";
position: absolute;
top: 30px;
left: 100%;
width: 25%;
height: 6px;
background-color: #AFDCF8;
}
特別注意的幾點：
- left: 100% 用來表示連接線緊靠圖標的右邊顯示
- width: 25% 用來定義連接線的寬度，恰好占據(jù)圖片右邊到垂直背景線的距離
1個巨大的疑問號？為何是 25%，而不是其他的數(shù)值？
其實這是精心安排的：
再來回想下，圖片占據(jù)了 40% 的寬度，那末連接線應(yīng)當占據(jù)全部寬度的 10% = (100% - 40% * 2） / 2，這是不言而喻的！
但是 li:after 的絕對定位（position:absolute）是相對第1個非靜態(tài)定位的父節(jié)點而言的，而這兒父節(jié)點就是 .timeline .events li 本身，所以連接線相對 li 的寬度：
40% * x = 10% = (100% - 40% * 2） / 2，可以計算出 x = 25%
====
假定，圖片的 CSS 中將寬度設(shè)為 45%，那末這里的 li:after 的 width 就應(yīng)當是 ((100% - 45% * 2） / 2) / 45% = 11.1%
此時的頁面效果：
Step7：自定義尺寸盒模型（box-sizing）
雖然我們信誓旦旦的說，那個 25% 是精心安排的，但是實際的效果的卻相差甚遠，連接線的寬度明顯寬了很多。
如果這是我們算1下圖片的實際寬度，就會發(fā)現(xiàn)圖片的實際寬度是 40%，這不包括內(nèi)邊距（padding） 和 邊框（border）！
這時候我們就需要重置頁面上所有元素的 box-sizing，從默許值 content-box 改成 border-box，而這個做法也是推薦的做法。
很多注明的 CSS 框架（包括現(xiàn)在比較流行的 BootStrap）都將這1規(guī)則作為默許的樣式：
* {
box-sizing: border-box;
}
下面來簡單比較下這兩則的區(qū)分：
- content-box：為元素設(shè)定的寬度和高度不包括內(nèi)邊距和邊框
- border-box：為元素設(shè)定的寬度和高度包括內(nèi)邊距和邊框
此時的頁面效果：
Step8：完全的 CSS 代碼
為右邊圖片添加連接線也很簡單，下面看看完全的 CSS 代碼：
* {
box-sizing: border-box;
}
body {
background-color: #efefef;
}
#main {
margin: 20px auto;
}
.timeline {
overflow: hidden;
position: relative;
}
.timeline:after {
content: "";
position: absolute;
width: 6px;
height: 100%;
background-color: #AFDCF8;
top: 0;
left: 50%;
margin-left: ⑶px;
z-index: 0;
}
.timeline .year {
background-color: #AFDCF8;
width: 60px;
height: 60px;
border-radius: 30px;
position: relative;
margin: 0 auto 50px;
clear: both;
z-index: 1;
}
.timeline .year-inner {
background-color: #46A4DA;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
border-radius: 25px;
position: absolute;
top: 50%;
margin-top: ⑵5px;
left: 50%;
margin-left: ⑵5px;
}
.timeline .events {
list-style-type: none;
padding: 0;
margin: 0;
clear: both;
}
.timeline .events li {
width: 40%;
margin-bottom: 100px;
border: solid 1px #AFDCF8;
padding: 10px;
border-radius: 5px;
float: left;
clear: left;
position: relative;
}
.timeline .events li:after {
content: "";
position: absolute;
top: 30px;
left: 100%;
width: 25%; /* 10% = 1 * 40% * 25% */
height: 6px;
background-color: #AFDCF8;
}
.timeline .events li.alt {
float: right;
clear: right;
margin-top: 50px;
margin-bottom: 50px;
}
.timeline .events li.alt:before {
content: "";
position: absolute;
top: 30px;
left: ⑵5%;
width: 25%;
height: 6px;
background-color: #AFDCF8;
}
.events img {
width: 100%;
}
終究的頁面效果：
源碼和視頻下載
源碼和視頻下載地址請自行到視頻中查找！ 3石出品，必屬精品！
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
