格式化jQuery時間軸？

Question

我使用的是時間線here

插件這是我當前的代碼：

<ul id="dates"> 
<li><a href="#1940s">1940s</a></li> 
<li><a href="#1950s" class="selected">1950s</a></li> 
<li><a href="#1960s">1960s</a></li> 
<li><a href="#1970s">1970s</a></li> 
<li><a href="#1980s">1980s</a></li> 
<li><a href="#1990s">1990s</a></li> 
<li><a href="#2000s">2000s</a></li> 
</ul> 
<ul id="issues"> 
<li id="1940s"><img src="/gfx/timeline/1950.jpg" /> 
<h1>1940's</h1> 
<p>Ronald.</p> 
</li> 
<li id="1950s"><img src="/gfx/timeline/1960.jpg" /> 
<h1>1950's</h1> 
<p>Eddy.</p> 
</li> 
<li id="1960s"><img src="/gfx/timeline/1970.jpg" /> 
<h1>1960's</h1> 
<p>1960s</p> 
</li> 
<li id="1970s"><img src="/gfx/timeline/1980.jpg" /> 
<h1>1970's</h1> 
<p>1970s</p> 
</li> 
<li id="1980s"><img src="/gfx/timeline/1990.jpg" /> 
<h1>1980's</h1> 
<p>1980s</p> 
</li> 
<li id="1990s"><img src="/gfx/timeline/1990.jpg" /> 
<h1>1990's</h1> 
<p>1990s</p> 
</li> 
<li id="2000s"><img src="/gfx/timeline/2000.jpg" /> 
<h1>2000s</h1> 
<p>2000s</p> 
</li> 
</ul> 

但我不明白我怎麼可以使它看起來像這樣...

任何幫助？謝謝

當前CSS：

#timeline { 
    width: 660px; 
    height: 350px; 
    overflow: hidden; 
    margin: 100px auto; 
    position: relative; 
    background: url('Img/vline.png') left 65px repeat-x; 
} 
#dates { 
    width: 660px; 
    height: 60px; 
    overflow: hidden; 
} 
#dates li { 
    list-style: none; 
    float: left; 
    width: 100px; 
    height: 50px; 
    font-size: 24px; 
    text-align: center; 
    background: url('Img/hline.png') center bottom no-repeat; 
} 
#dates a { 
    line-height: 38px; 
    text-decoration:none; 
    color:#999; 
    font-size:15px; 
    font-weight:bold; 
} 
#dates .selected { 
    font-size: 38px; 
    color:#000; 
} 

#issues { 
    width: 660px; 
    height: 350px; 
    overflow: hidden; 
} 
#issues li { 
    width: 660px; 
    height: 350px; 
    list-style: none; 
    float: left; 
} 
#issues li img { 
    float: right; 
    margin: 100px 30px 10px 50px; 
} 
#issues li h1 { 
    color: #999; 
    font-size: 20px; 
    margin: 20px 0; 
} 
#issues li p { 
    font-size: 14px; 
    margin-right: 70px; 
    font-weight: normal; 
    line-height: 22px; 
} 

Answer 1

工作例如：http://jsfiddle.net/JJrfN/

您可以使用::before和::after僞元素添加的行。這不會對老式的broswers友好（IE7不支持這些僞元素，IE8粗略）。您還必須將position: relative添加到#dates li元素。

因此，舉例來說，你可以在下面的CSS添加到您的例子：

#dates li a::before { 
    content: ""; 
    position: absolute; 
    width: 1px; 
    height:50px; 
    background-color: grey; 
    left: 50%; 
    bottom: -50px;  
} 

#dates li a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -50px;  
} 

你還會發現，你要的風格的第一個和最後li元素略有不同，因爲它們缺少任一前一/前進li元素。所以這些都必須有針對性和seperately風格：

#dates li:first-child a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 50px; 
    right: -20px; 
    bottom: -50px;  
} 

#dates li:last-child a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    width: 50px; 
    bottom: -50px;  
} 

要移動其他人之上的.selected li元素，那麼你可以把它作爲我們相對定位是負top值。要添加圓形邊框，您可以使用border-radius: 10px。這隻適用於現代的布羅斯，然而一些舊的布羅斯包括他們自己的選擇器，例如Chrome的-webkit-border-radius:3px;和Firefox的-moz-border-radius:3px;。不幸的是，這在IE8及以下版本中不受支持。

#dates li.selected { 
    font-size: 38px; 
    top: -30px; 
    border: 1px solid grey; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    border-radius: 10px; 
} 

同樣，你會發現，你必須改變::before和::after僞元素花式的.selected元素，我們已經改變了top位置，所以這些都要有針對性，並適當改變：

#dates li.selected a::before { 
    content: ""; 
    position: absolute; 
    width: 1px; 
    height:88px; 
    background-color: grey; 
    left: 50%; 
    bottom: -88px; 
} 

#dates li.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -88px; 
} 

，並再次當已經選擇了第一個或最後li元素的樣式：

#dates li:first-child.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 50px; 
    right: -20px; 
    bottom: -88px; 
} 

#dates li:last-child.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -88px; 
} 

雖然這是一個很長時間的做法，但這可以通過一點時間和理解來清理（這就是爲什麼我在這個答案中添加了大量信息的原因）。

我希望它能讓你瞭解如何實現你想要的設計。

工作例如：http://jsfiddle.net/JJrfN/

Answer 2

jQuery Timelinr有一個樣式爲style_v.css的文件。據我所知，你可以改變這些樣式，你想如何獲得一個新的設計。