Pure Css+js Horizontal Time axis

Custom, and automatically load time nodes

Center current time node, highlighting

Time dynamic non-marking add

：

Initial state

Time left to a certain 2016.1 months after

Html:

<!--horizontal time axis--
<div id= "Timeline" style= "WIDTH:902PX; height:60px; " >
<ul id= "Dates" style= "position:absolute; right:0; Top: -10px; " ></ul>
<ul id= "Issues" style= "display:none;" >
</ul>
<div id= "Grad_left" style= "Display:none;" >
</div>
<div id= "Grad_right" style= "Display:none;" ></div>
<a href= "#" id= "Next" style= "Display:none;" >+</a>
<a href= "#" id= "prev" style= "Display:none;" >-</a>
</div>
<!--End Horizontal time axis--

corresponding JS set Processing:

var left = document.getElementById (datesdiv). Offsetleft + parseint ($ ("#" + datesdiv). Parent (). CSS (' Background-position-y ') + $ ("#" + datesdiv). Children (). width ();
var newyear = parseint ($ ("#dates li:first-child a"). attr (' year ')-1;
if (Left > 0) {
var datesli = "";
for (var i = 1; i <=; i++) {
Datesli + = "<li><a href=\" javascript:void (); \ "Onclick=\" Choosemonth (' "+ NewYear +" ', ' "+ i +" ') \ "year=" + NE Wyear + "Month=" + i + ">" + NewYear + "." + i + "</a></li>";
}
$ ("#dates"). Width ($ ("#dates"). Width () + * $ ("#" + datesdiv). Children (). width ());
$ ("#dates li:first-child"). Before ($ (DATESLI));
$ (). TIMELINR ({arrowkeys: ' true '});//In the source code, the Click event is bound to a on, not re-initialized here
}

Information Download: Link: http://pan.baidu.com/s/1o8lezNG Password: 7q6n

Pure Css+js Horizontal Time axis