<div class="tab-wrap right">
<ul class="tab-title">
<li class="active"><span>热歌榜单</span></li>
<li><span>飙升榜</span></li>
<li><span>励志</span></li>
<li><span>甜蜜物语</span></li>
<li><span>欧美</span></li>
<li><span>流行</span></li>
<li><span>原创</span></li>
<li><span>国风</span></li>
<li><span>不想长大</span></li>
<li><span>翻唱</span></li>
<li><span>激萌</span></li>
<li><span>说唱</span></li>
<li><span>民谣</span></li>
<li><span>纯音乐</span></li>
</ul>
</div>
.tab-wrap {
width:600px;
margin: 10px auto 16px;
overflow:hidden;
position: relative;
}
.tab-wrap.left:before {
content: '...';
width: 34px;
height: 53px;
line-height: 45px;
text-align: center;
display: block;
box-shadow: 2px 0px 15px rgba(126,117, 117, 0.14);
position: absolute;
top: 0;
left: 0;
background-color: #fff;
z-index: 1;
}
.tab-wrap.right:after {
content: '...';
width: 34px;
height: 53px;
line-height: 45px;
text-align: center;
display: block;
box-shadow: -2px 0px 15px rgba(126,117, 117, 0.14);
position: absolute;
top: 0;
right: 0;
background-color: #fff;
}
.tab-title {
width: 600px;
display: flex;
word-break: keep-all;
margin: auto;
overflow-x: auto;
position: relative;
-webkit-user-select: none;
transition: transform 0.5s ease;
}
.tab-title::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.tab-title li {
line-height: 52px;
padding: 0 18px;
border-bottom: 1px solid #eee;
}
.tab-title li span {
cursor: pointer;
position: relative;
}
.tab-title li span:hover {
color: #1E62EC;
}
.tab-title li.active span {
color: #1E62EC;
font-weight: bold;
cursor: pointer;
display: block;
}
.tab-title li.active span:before {
content: '';
width: 100%;
height: 2px;
background-color: #1E62EC;
position: absolute;
bottom: 0px;
}
let tab = document.querySelector(".tab-title");
//音乐 导航滚轮效果
tab.addEventListener("wheel", function (e) {
let dundong = -e.wheelDelta;
tab.scrollLeft = tab.scrollLeft + dundong;
tab.scrollLeft <= 0 ? document.querySelector(".tab-wrap").classList.remove('left') : document.querySelector(".tab-wrap").classList.add('left');
(tab.scrollLeft + 600) >= tab.scrollWidth ? document.querySelector(".tab-wrap").classList.remove('right') : document.querySelector(".tab-wrap").classList.add('right');
});
//音乐 导航拖拽效果
tab.addEventListener("mousedown", function (e) {
var beginMove = e.clientX;
// 当鼠标移动时,被拖拽元素跟随鼠标移动 onmousemove
document.onmousemove = function (event) {
event = event || window.event;
// 获取鼠标的坐标
var endMove = event.clientX;
tab.scrollLeft = tab.scrollLeft + eval(beginMove - endMove);
tab.scrollLeft <= 0 ? document.querySelector(".tab-wrap").classList.remove('left') : document.querySelector(".tab-wrap").classList.add('left');
(tab.scrollLeft + 600) >= tab.scrollWidth ? document.querySelector(".tab-wrap").classList.remove('right') : document.querySelector(".tab-wrap").classList.add('right');
};
//当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
document.onmouseup = function (event) {
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
}
});