根据需求需要做一个左右箭头,去控制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>