自定义封装时间轴纵向滚动
时间轴滚动以前没写过,今天写着玩,只实现了鼠标纵向滑动时间轴的效果,暂时没做三列联动效果
效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/93ddddf32350eb98bcb13da37efe87a8.png)
具体实现的代码如下:
<div id="container">
<div id="select"></div>
<div class="year column"></div>
<div class="month column"></div>
<div class="day column"></div>
</div>
#container {
width: 400px;
margin: 0 auto;
border: 1px solid black;
position: relative;
display: flex;
flex-direction:row;
flex-wrap:nowrap;
}
.column {
width: 100%;
height: 60px;
overflow: hidden;
margin: 20px 0;
background: transparent;
}
.scroll {
padding: 0;
margin: 0;
text-align: center;
position: relative;
user-select:none;
}
.scroll li {
height: 20px;
font-size: 14px;
line-height: 20px;
list-style: none;
cursor: pointer;
}
#select {
position: absolute;
height: 20px;
width: 100%;
background: rgba(0,0,0,0.3);
top: 50%;
margin-top: -10px;
}
;(function () {
var DateScroll = function (container,column,scroll) {
this.config = {};
this.config.container = document.getElementById(container);
this.config.column = this.config.container.getElementsByClassName(column);
this.setDateLists();
this.config.scroll = this.config.container.getElementsByClassName(scroll);
this.setScrollEvent();
}
DateScroll.prototype = {
setDateLists: function () {
var _this = this;
var getDate = new Date();
var year = getDate.getFullYear();
var month = getDate.getMonth() + 1;
var day = getDate.getDay();
_this.setSelectLists(_this.config.column[0],year);
_this.setSelectLists(_this.config.column[1],12);
_this.setSelectLists(_this.config.column[2],31)
},
setSelectLists: function (column,num) {
var _this = this;
var htmlStr = "";
if (num > 31) {
for (var i = (num - 5); i < (num + 5); i++) {
htmlStr += '<li>' + i + '</li>';
}
} else {
for (var i = 0; i < num; i++) {
htmlStr += '<li>' + (i+1) + '</li>';
}
}
var ul = document.createElement('ul');
ul.className = "scroll";
ul.innerHTML = htmlStr;
var domHtml = document.createDocumentFragment();
domHtml.appendChild(ul);
column.appendChild(domHtml);
},
setScrollEvent: function () {
var _this = this;
for (let i = 0, len = _this.config.scroll.length; i < len; i++) {
var disY = 0;
_this.config.scroll[i].onmousedown = function (ev) {
var mouseEvent = ev || event;
disY = mouseEvent.clientY - _this.config.scroll[i].offsetTop + 30;
_this.config.scroll[i].onmousemove = function (ev) {
var mouseEvent = ev || event;
maxTop = -1 * (_this.config.scroll[i].offsetHeight - 30*2);
var distance = mouseEvent.clientY - disY;
distance = distance > 0 ? 0 : distance;
distance = distance < maxTop ? maxTop : distance;
_this.config.scroll[i].style.top = distance + 'px';
}
document.onmouseup = function () {
_this.config.scroll[i].onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
}
}
window.DateScroll = DateScroll;
})()
调用方法:
var datescroll = new DateScroll('container','column','scroll');