純css+js水平時間軸

自定義，並自動加載時間節點

當前時間節點居中，突出顯示

時間動態無痕添加

效果圖：

初始狀態

 

時間左走到一定2016.1月后

html：

<!-- 水平時間軸 -->
<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水平時間軸 -->

 

對應 JS 設置處理：

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 <= 12; i++) {
datesLi += "<li><a href=\"javascript:void();\" onclick=\"chooseMonth('" + newYear + "','" + i + "')\" year=" + newYear + " month=" + i + ">" + newYear + "." + i + "</a></li>";
}
$("#dates").width($("#dates").width() + 12 * $("#" + datesDiv).children().width());
$("#dates li:first-child").before($(datesLi));
//$().timelinr({ arrowKeys: 'true' });//在源碼中，click事件用on綁定到a上，此處不用重新初始化
}

 

 

資料下載：鏈接: http://pan.baidu.com/s/1o8lezNG 密碼: 7q6n