PC 导航鼠标滚动效果与鼠标拖拽效果实现

原创已于 2024-01-23 14:36:24 修改 · 525 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#计算机外设 #javascript #开发语言

于 2024-01-23 14:35:38 首次发布

本文介绍了如何使用JavaScript为音乐播放列表创建一个可滚动和拖动的导航栏，通过监听`wheel`和`mousedown`事件实现导航栏的动态调整和响应式设计。

 <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;
      }
});

参考博客：js基础 — 简单易懂，拖拽事件（二）_鼠标拖拽事件-CSDN博客