js⽤滚动条模拟横向时间轴
1. 原理是通过设置时间轴盒⼦overflow-x: scroll；横向溢出的时候出现滚动条； (同理，制作纵向时间轴则设置overflow-y: scroll)
2. 在时间轴盒⼦外层再包裹⼀个固定⼤⼩的div，该盒⼦⾼度要⽐时间轴的盒⼦⾼度⼩20px，设置overflow:hidden，则可以隐藏掉时
间轴盒⼦出现的滚动条;
css代码：
.car-time-bar{
width: 885px;
height: 220px;
margin: 22px 24px;
padding: 0 16px;
position: relative;
overflow: hidden;
}
.car-time-bar-content{
width: 885px;
height: 240px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
/* 时间轴左右两侧分别放置两个按钮点击左划和点击右划 */
.
nv_lf{
width: 16px;
height: 22px;
background:url("../img/time_bar_l.png") no-repeat;
position: absolute;
left: 0;
top: 50%;
margin-top: -11px;
}
.nv_rt{
width: 16px;
height: 22px;
background:url("../img/time_bar_r.png") no-repeat;
position: absolute;
right: 0;
top: 50%;
margin-top: -11px;
}
样式的部分不多赘述，每⼀份设计稿设计都不⼀致，主要是理解⽅法
时间轴滑动的原理是通过点击按钮控制滚动条滚动，使⽤setInterval模拟实现平滑滚动；
js代码如下：
var nvLf =$('左划按钮id'),
nvRg =$('右划按钮id'),
timeBar = ElementById('时间轴盒⼦id');    ('click',function(){
var times =0;
var leftScroll =setInterval(function(){
var leftLen = timeBar.scrollLeft;
var step = leftLen -10;
timeBar.scrollLeft = step;
times +=1;
if(times ==18){
clearInterval(leftScroll);
}
},1);
js控制滚动条});
<('click',function(){
var times =0;
var leftScroll =setInterval(function(){
var leftLen = timeBar.scrollLeft;
var step = leftLen +10;
timeBar.scrollLeft = step;
times +=1;
if(times ==18){
clearInterval(leftScroll);
}
},1);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。