JavaScript封装导航栏按键控制匀速移动组件

懮俍

于 2022-09-05 10:47:32 发布

阅读量312

点赞数

分类专栏：开发过程文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/dick_1999/article/details/126700303

版权

开发过程专栏收录该内容

30 篇文章 1 订阅

订阅专栏

根据需求需要做一个左右箭头，去控制nav导航栏进行一个长按移动效果去显示已有的nav标签

看了一下项目内的技术栈以及该效果的实现可能性，选择了用jQuery内的scrollLeft()去完成。

大致实现的效果如下

JavaScript封装导航栏按键控制匀速移动组件

实现代码如下：

<!--
 * @Description:
 * @Version: 1.0.0.1
 * @Autor: wufeng
 * @Date: 2022-08-22 15:27:44
 * @LastEditors: wufeng
 * @LastEditTime: 2022-09-05 10:45:46
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header_right {
        position: absolute;
        left: 60rem;
        top: 0.56rem;
        width: calc(100% - 60rem);
      }
      .presetWrap {
        position: relative;
        display: inline-block;
        width: calc(100% - 18rem);
      }
      .scrollLeft,
      .scrollRight {
        width: 2rem;
        height: 2rem;
        display: inline-block;
        vertical-align: middle;
        background-image: url("./image/video/arrow.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .scrollLeft {
        transform: rotate(180deg);
      }
      .scrollLeft:active,
      .scrollRight:active {
        background-image: url("./image/video/arrow2.png");
      }
      .btn {
        width: 3.89rem;
        height: 2.22rem;
        background-image: url("./image/screenmodel_button_normal.png");
        background-size: 100% 100%;
        float: right;
        color: #fff;
        text-align: center;
        line-height: 2.22rem;
        font-size: 1.67rem;
        cursor: pointer;
      }
      .btn:active {
        color: #04c6e1;
      }
      .btn-save {
        background-image: url("./image/save_control.png"),
          url("./image/screenmodel_button_normal.png");
        background-repeat: no-repeat, no-repeat;
        background-position: center center, center, center;
        background-size: 1.44rem 1.44rem, 100% 100%;
      }
      .btn-save:active {
        background-image: url("./image/save_control_select.png"),
          url("./image/screenmodel_button_normal.png");
      }
      .btn-record {
        background-image: url("./image/recodernormal.png"),
          url("./image/screenmodel_button_normal.png");
        background-repeat: no-repeat, no-repeat;
        background-position: center center, center, center;
        background-size: 1.44rem 1.44rem, 100% 100%;
      }
      .presetList {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;
      }
      .preset {
        width: 100px;
        height: 2.22rem;
        line-height: 2.22rem;
        text-align: center;
        background-image: url("./image/audio/audio_item.png");
        background-size: 100% 106%;
        color: #fff;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        padding: 0 2px;
        @media screen and(max-width: 1440px) {
          & {
            font-size: 12px;
          }
        }
      }
      .preset.active {
        background-image: url("./image/audio/audio_item2.png");
      }
    </style>
  </head>
  <body>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <div class="header_right">
      <div
        class="scrollLeft"
        id="scrollLeft"
      ></div>
      <div class="presetWrap">
        <div class="presetList" id="presetList">
        </div>
      </div>
      <div
        class="scrollRight"
        id="scrollRight"
      ></div>
    </div>
    <script>
      // 数据换自己的
      var presetList = [];
      //2.创建li节点
      var _presetList = document.getElementById("presetList");

      console.log(_presetList);
      presetList.forEach(function (obj) {
        // createElement:创建节点
        var _div = document.createElement("div");
        _div.classList.add("preset");
        _div.innerHTML = `
				${obj.presetName}
				`;
        //3.向ul中追加li
        // insertBefore：_li插入到_taskList子节点上面
        _presetList.insertBefore(_div, _presetList.firstChild);
      });
      var time = "";
      var scrollLeft = document.getElementById("scrollLeft");
      var scrollRight = document.getElementById("scrollRight");
      console.log("scrollLeft", scrollLeft);
      scrollLeft.onmousedown = function (flag) {
        clearInterval(time);
        time = setInterval(() => {
          $(".presetList").scrollLeft($(".presetList").scrollLeft() - 1);
        }, 5);
      };
      scrollLeft.onmouseup = function () {
        clearInterval(time);
      };
      scrollRight.onmousedown = function (flag) {
        clearInterval(time);
        time = setInterval(() => {
          $(".presetList").scrollLeft($(".presetList").scrollLeft() + 1);
        }, 5);
      };
      scrollRight.onmouseup = function () {
        clearInterval(time);
      };
    </script>
  </body>
</html>

懮俍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript封装导航栏按键控制匀速移动组件

看了一下项目内的技术栈以及该效果的实现可能性，选择了用jQuery内的scrollLeft()去完成。根据需求需要做一个左右箭头，去控制nav导航栏进行一个长按移动效果去显示已有的nav标签。JavaScript封装导航栏按键控制匀速移动组件。
复制链接

扫一扫

专栏目录