格式化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的文件。据我所知，你可以改变这些样式，你想如何获得一个新的设计。