纯css+js水平时间轴

自定义，并自动加载时间节点

当前时间节点居中，突出显示

时间动态无痕添加

效果图：

初始状态

时间左走到一定2016.1月后

html：

<!-- 水平时间轴 -->
<div id="timeline" >
<ul id="dates" ></ul>
<ul id="issues" >
</ul>
<div id="grad_left" >
</div>
<div id="grad_right" ></div>
<a href="#" id="next" >+</a>
<a href="#" id="prev" >-</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

原标题：纯css+js水平时间轴

关键词：JS