【三石jQuery視頻教程】03.建立垂直時間表(Timeline)

時間  2019-11-16
標籤 三石jQuery視頻教程 建立 垂直 時間表 timeline 欄目 JQuery 简体版
原文   原文鏈接

視頻地址：http://v.qq.com/page/g/i/o/g0150rvi6io.htmljavascript

 

你們好，歡迎來到【三石jQuery視頻教程】，我是您的老朋友 - 三生石上。css

今天，咱們要經過基本的HTML、CSS、jQuery來實現垂直時間表，先來看下最終的產品：html

 

簡單起見，時間表中的每一個節點用一張圖片代替，實際應用中多是標題-圖片-正文的樣子。java

Step1：網站目錄

網站目錄很是簡單，包含三部分：lesson3.html 文件、lib 目錄和 images 目錄。jquery

其中 lesson3.html 包含了一個頁面最基本的組成部分，正確的設置 DOCTYPE 有助於頁面在現代瀏覽器中正確渲染。瀏覽器

<!DOCTYPE html>
<html>
<head>
    <title>03.建立垂直時間表(Timeline) - 三石jQuery視頻教程</title>
    
</head>
<body>

    
</body>
</html>

 

lib 目錄僅包含了最新的 jQuery 庫；images 目錄包含使用到的 9 張圖片。　app

 

Step2：頁面結構

爲頁面添加基本的 html 標籤。框架

  1. 爲了實現時間標籤的雙色背景，嵌套了兩層 div，分別用 CSS 樣式類 year 和 year-inner 來標示
  2. 時間表中的事件列表用 ul.events li 進行組織
  3. 最後給最外層的時間表節點定義樣式類 timeline
<!DOCTYPE html>
<html>
<head>
    <title>03.建立垂直時間表(Timeline) - 三石jQuery視頻教程</title>
</head>
<body>
    <div id="main">
        <h2>
            03.建立垂直時間表(Timeline) - 三石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>

　　

此時的頁面顯示效果：less

 

 

Step3：時間標籤的樣式

下面咱們來建立時間標籤的樣式，爲了實現雙色圓形背景，咱們作了以下努力：ide

  1. 固定寬度和高度，並讓 border-radius 等於寬度和高度的 1/2 來實現圓形背景
  2. 兩個背景的顏色直接取自 FineUI（專業版）的版本更新頁面
  3. 爲了讓時間標籤（2015）在 year-inner 中居中顯示，分別定義 line-height 和 text-align 屬性
  4. 爲了讓 year-inner 在 year 中居中，咱們使用了絕對定位（top:50%; margin-top:-25px;）的 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: -25px;
		left: 50%;
		margin-left: -25px;
	}
	
	.events img {
		width: 100%;
	}
</style>

　　

此時的頁面顯示效果：

 

Step4：讓圖片左右顯示

爲了讓圖片均勻的左右顯示，也就是一個左，一個右，而後再一個左，一個右，因此須要明確區分奇數和偶數的 li 標籤，咱們使用 jQuery 來完成這一任務：

<script src="lib/jquery.js"></script>
<script>
	$(function() {
		$('.timeline .events li:nth-child(2n)').addClass('alt');
	});
</script>

jQuery 的子選擇器 :nth-child(2n) 用來選擇列表中的偶數項，並添加樣式類 alt。 　　

 

下面，咱們經過 CSS 定義，左右兩側的圖片分別佔據 40% 的寬度，也就是說中間預留了 20% 的寬度，用一個圖示來簡單說明：

使用 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：時間標籤後面的垂直背景線

原本咱們可使用一個絕對定位的 div 節點來實現這個效果，不過更簡便的辦法是 :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: -3px;
}

:after 僞選擇器用來在某個元素的內容後面插入新的內容：

  • content 定義要插入的新內容，這裏咱們不須要插入任何文本內容，因此留空
  • 將新內容絕對定位，就和使用正常 div 節點同樣
  • 爲了讓垂直背景線水平居中顯示，咱們一樣使用了前面提到的 top:50% + margin-top 的小技巧

 

此時的頁面效果：

　

Step6：垂直背景線到圖片的鏈接線

使用相似的僞選擇器，咱們很容易相對於每一個 li 節點，定義鏈接線：

.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% 用來定義鏈接線的寬度，剛好佔據圖片右側到垂直背景線的距離

一個巨大的疑問號？爲何是 25%，而不是其餘的數值？

其實這是精心安排的：

再來回憶下，圖片佔據了 40% 的寬度，那麼鏈接線應該佔據整個寬度的 10% = (100% - 40% * 2） / 2，這是顯而易見的！

可是 li:after 的絕對定位（position:absolute）是相對於第一個非靜態定位的父節點而言的，而這兒父節點就是 .timeline .events li 自己，因此鏈接線相對於 li 的寬度：

40% * x = 10% =  (100% - 40% * 2） / 2，能夠計算出 x = 25%

 

====

假設，圖片的 CSS 中將寬度設爲 45%，那麼這裏的 li:after 的 width 就應該是 ((100% - 45% * 2） / 2) / 45% = 11.1%

 

此時的頁面效果：

 

 

Step7：自定義尺寸盒模型（box-sizing）

雖然咱們信誓旦旦的說，那個 25% 是精心安排的，可是實際的效果的卻相差甚遠，鏈接線的寬度明顯寬了不少。

若是這是咱們算一下圖片的實際寬度，就會發現圖片的實際寬度是 40%，這不包含內邊距（padding） 和 邊框（border）！

 

這時咱們就須要重置頁面上全部元素的 box-sizing，從默認值 content-box 改成 border-box，而這個作法也是推薦的作法。

不少註明的 CSS 框架（包括如今比較流行的 BootStrap）都將這一規則做爲默認的樣式：

* {
    box-sizing: border-box;
}

 

下面來簡單比較下這兩則的區別：

  • content-box：爲元素設定的寬度和高度不包含內邊距和邊框
  • border-box：爲元素設定的寬度和高度包含內邊距和邊框　　

 

此時的頁面效果：

　　

　　

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: -3px;
	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: -25px;
	left: 50%;
	margin-left: -25px;
}

.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: -25%;
	width: 25%;
	height: 6px;
	background-color: #AFDCF8;
}

.events img {
	width: 100%;
}

　　

 

最終的頁面效果：

 

 

源碼和視頻下載  

源碼和視頻下載地址請自行到視頻中查找！ 三石出品，必屬精品！

若是本文對你有所幫助，請點擊 [推薦] 按鈕來鼓勵做者，你的支持是咱們前進的動力！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程