js用滚动条模拟横向时间轴

原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条； (同理，制作纵向时间轴则设置overflow-y: scroll)
在时间轴盒子外层再包裹一个固定大小的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 = document.getElementById('时间轴盒子id');nvLf.on('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);});nvRg.on('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用滚动条模拟横向时间轴相关推荐

CSS实现一个动态横向时间轴
CSS实现一个动态横向时间轴先看效果 html <template><x-view class="stepFlex"><x-viewv-for=&q ...
Vue，swipper手写横向时间轴
在一次需求中,UI交互用是关于时间轴,手写代码如下: HTML代码: HTML: <div class="swiper-container" ...
vue实现横向时间轴
最近项目需求,一个横向的时间轴,看了看elmentUi只有一个纵向的,干脆自己手撸一个效果图如下: <div class="Timeline"><h2>操 ...
android自定义横向时间轴,Android自定义时间轴的实现过程
本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 ...
js写的几款时间轴
1.使用CSS3和jQuery制作的水平时间轴这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
js+css个人工作状态时间轴-模拟企业微信个人天日程表
代码: <head><style>* {padding: 0px;margin: 0px;box-sizing: border-box;user-select: none;}. ...
vue 实现横向时间轴
效果: <template><div class="timeLine" style="overflow: hidden; ...
分享66个JS时间轴特效，总有一款适合您
分享66个JS时间轴特效,总有一款适合您 66个JS时间轴特效下载链接:https://pan.baidu.com/s/1DD8EqIZjsmzpRB0pHkzUdg?pwd=pgw4 提取码:pg ...
Vue时间轴（横向）
可自定义设置以下属性: 时间轴数据(timelineData),必传初始选中年份(activeYear),默认2020 效果如下图(自适应均匀排列,每个元素周围分配相同的空间<space-ar ...

js用滚动条模拟横向时间轴

js用滚动条模拟横向时间轴相关推荐

最新文章

热门文章