你的位置:首页 > 网页设计

[网页设计]纯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