<div id="timeline">
ul ="dates">
li><a href="#2011">2011</a></="#2012">2012ul="issues"li ="2011">
p>Lorem ipsum.="2012">分享生活 留住感动="#" id="next">+> <!-- optional -->
="prev">--->
div>
script type="text/javascript" src="jquery-1.8.2.min.js"script>
="jquery.timelinr-0.9.53.js">
#timeline {width: 760px;height: 440px;overflow: hidden;margin: 40px auto;
position: relative;background: url('dot.gif') 110px top repeat-y;}
#dates { 115px;float: left;}
#dates li {list-style: none; 100px;line-height:font-size: 24px;
padding-right:20px; text-align:right; background: url('biggerdot.png') 108px center no-repeat;}
#dates a { 38px;padding-bottom: 10px;}
#dates .selected { 38px;}
#issues { 630px; right;}
#issues li { none;}
#issues li h1 {color: #ffcc00; 42px; height:52px; line-height:
text-shadow: #000 1px 1px 2px;}
#issues li p { 14px; 10px; 26px;}
$(function(){
$().timelinr({
orientation:'vertical'
});
});
src="jquery.mousewheel.js">
//--------------Added by helloweba.com 20130326----------
if(settings.mousewheel=="true") { 支持滚轮
$(settings.containerDiv).mousewheel((event,delta,deltaX,deltaY){
if(delta==1){
$(settings.prevButton).click();
}else{
$(settings.nextButton).click();
}
});
}
$((){
$().timelinr({
mousewheel: 'true'
});
});