星空网 > 软件开发 > 网页设计

纯css+js水平时间轴

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

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

时间动态无痕添加

效果图:

纯css+js水平时间轴

初始状态

 

纯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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊产品促销推广和引流策略三板斧之Deal活动(下):https://www.ikjzd.com/articles/123658
【实操】如何合并重复listing?:https://www.ikjzd.com/articles/123659
干货|容易导致亚马逊账号被封十个原因:https://www.ikjzd.com/articles/123660
抓住日本站消费者的心,先抓住他们的积分欲!提升转化加大曝光神器!:https://www.ikjzd.com/articles/123661
Payoneer全球跨境电商指数报告:中国Q1收入同比增长25%:https://www.ikjzd.com/articles/123662
东南亚市场下半年大促选品爆单攻略!:https://www.ikjzd.com/articles/123663
TikTok 将推出先买后付服务 :https://www.kjdsnews.com/a/1836651.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流