HTML代码demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timeline</title>
<link rel="stylesheet" href="timeline.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="timeline.js"></script>
<style>
body {
padding: 20px 0 0 0;
margin: 0;
}
h3 {
border-bottom: 1px dashed silver;
padding-bottom: 4px;
}
</style>
<script>
$(document).ready(function(){
$('#timeline').timeline();
});
</script>
</head>
<body>
<div id="timeline">
<ul>
<li>
<div>
<h3>UNIX</h3>
<p>UNIX操作系统（英语：UNIX），是美国AT&T公司贝尔实验室于1969年实现的操作系统。最早由肯·湯普遜(Ken Thompson), 丹尼斯·里奇(Dennis Ritchie), 道格拉斯·麥克羅伊（Douglas McIlroy)，和Joe Ossanna于1969年在AT&T贝尔实验室开发。于1971年首次发布，最初是完全用汇编语言编写，这是当时的一种普遍的做法。后来，在1973年用一个重要的开拓性的方法，Unix被丹尼斯·里奇用编程语言C（内核和I/O例外）重新编写[11]。高级语言编写的操作系统具有的可用性，允许移植到不同的计算机平台更容易。</p>
</div>
</li>
<li>
<div>
<h3>GNU</h3>
<p>1983年，理查德·馬修·斯托曼創立了GNU計劃。這個計劃有一個目標，是為了發展一個完全*的類Unix作業系統。自1984年發起這個計劃以來[12] ，在1985年，理查德·馬修·斯托曼發起*軟體基金會並且在1989年撰寫了GPL協議。1990年代早期，GNU開始大量的產生或收集各種系統所必備的元件，像是——函式庫、編譯器、偵錯工具、文字編輯器、網頁伺服器，以及一個Unix的使用者介面（Unix shell）——但是像一些底層環境，如硬體驅動、守護進程執行核心（kernel）仍然不完整和陷于停顿，GNU計劃中是在馬赫微核（Mach microkernel）的架構之上開發系統核心，也就是所謂的GNU Hurd，但是這個基於Mach的設計異常複雜，發展進度則相對緩慢。[13]林納斯·托瓦茲曾說過如果GNU核心在1991年時可以用，他不會自己去寫一個。[14]</p>
</div>
</li>
<li>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Richard_Matthew_Stallman_cropped.jpeg/170px-Richard_Matthew_Stallman_cropped.jpeg" alt="Richard M. Stallman">
</div>
</li>
<li>
<div>
<h3>BSD</h3>
<p>386BSD因為法律問題直到1992年還沒有發布，NetBSD和FreeBSD是386BSD的後裔，早于Linux。林纳斯·托瓦兹曾说，当时如果有可用的386BSD，他就可能不會編寫Linux。[15]</p>
</div>
</li>
<li>
<div>
<p>MINIX是一個廉價的小型類Unix作業系統，是為在電腦科學用作教學而設計的，作者是安德鲁·斯圖爾特·塔能鲍姆。從第三版開始，MINIX是*軟體，而且被「嚴重的」重新設計。</p>
</div>
</li>
<li>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/7/71/Linus_Torvalds_cropped.jpeg" alt="Richard M. Stallman">
</div>
</li>
<li>
<div>
<p>1991年，芬蘭人林納斯·托瓦茲在赫爾辛基大學上學，對作業系統很好奇[16]，並且對MINIX只允許在教育上使用很不滿(其不允許任何商業使用），於是開始寫他自己的作業系統，這就是後來的Linux核心。</p>
</div>
</li>
<li>
<div>
<p>林納斯·托瓦茲開始在MINIX上開發Linux內核，為MINIX寫的軟體也可以在Linux內核上使用。後來Linux成熟了，可以在自己上面開發自己了。[17]使用GNU 軟體代替MINIX的軟體，因為使用從GNU 系統來的原始碼可以*使用，這對新作業系統是有益的。使用GNU GPL 協議的原始碼可以被其他項目所使用，只要這些項目使用同樣的協議發布。為了讓Linux 可以在商業上使用，林納斯·托瓦茲決定改變他原來的協議（這個協議會限制商業使用)，使用GNU GPL協議來代替。[18]開發者致力於融合GNU 元素到Linux 中，做出一個有完整功能的、*的作業系統。</p>
</div>
</li>
</ul>
</div>
</body>
</html>
timeline.css
.node {
position: relative;
color: lightgray;
padding: 20px;
margin: 20px;
border-radius: 8px;
box-shadow: 0 0 10px black;
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
.node a, .node a:hover {
color: white;
font-style: italic;
}
.arrow {
top: 20px;
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 10px;
}
.left > .arrow {
right: -10px;
border-left-color: #222222;
border-right-width: 0;
}
.right > .arrow {
left: -10px;
border-right-color: #222222;
border-left-width: 0;
}
.timeline {
position: relative;
}
.timeline > ul {
margin: 0;
padding: 0;
list-style: none;
}
.timeline .wrap {
width: 50%;
}
.timeline .left .wrap {
float: left;
}
.timeline .right .wrap {
float: right;
}
.timeline .left .node {
float: right;
margin-right: 26px;
}
.timeline .right .node {
float: left;
margin-left: 30px;
}
.timeline .circle {
width: 12px;
height: 12px;
background-color: lightblue;
position: absolute;
top: 21px;
border-radius: 20px;
z-index: 999;
border: 4px solid white;
}
.timeline .left .circle {
right: -38px;
}
.timeline .right .circle {
left: -38px;
}
.time-line {
width: 4px;
background-color: black;
position: absolute;
left: 50%;
top: 0;
border-radius: 4px;
}
@media(max-width: 767px) {
.time-line {
left: 12px;
}
.timeline .wrap {
width: auto;
margin-left: 20px;
}
.timeline .right .node {
margin-left: 20px;
}
.timeline .left .node,
.timeline .right .wrap {
float: left;
}
.timeline .circle {
top: 19px;
}
.timeline .left .circle,
.timeline .right .circle {
left: -36px;
}
.timeline .left > .arrow {
right: auto;
left: -10px;
border-right-width: 10px;
border-right-color: black;
border-left-width: 0;
border-left-color: transparent;
}
}
timeline.js
$(window).load(function(){
$('.time-line').height($('.timeline').height());
});
(function($){
$.fn.timeline = function(options){
var $this = $(this);
$(this).addClass('timeline')
. append('<div class="time-line">');
$('ul > li > div', this).each(function(index){
$(this).after('<div style="clear: both;">')
. wrap('<div class="wrap"></div>')
. append(
'<div class="arrow"></div>' +
'<div class="circle"></div>')
. addClass('node');
if (index % 2 == 0)
$(this).addClass('left')
. parent().parent().addClass('left');
else
$(this).addClass('right')
. parent().parent().addClass('right');
});
$(window).resize(function(){
$('.time-line').height($('.timeline').height());
});
};
})(jQuery);