简单说两句
成都最近的天气一直飘雨，周末陪朋友去火车南站领克4S看车，我看车一般会注重车的音箱效果（领克用的infi的高级货），一上去就打开收音机，职业习惯又冒出来了，这个车机的切换效果是我见过非常有趣的。回来的路上一直在想这个咋做的呢？手啊，就一直洋洋，终于经过几个小时的折腾，终于做出一个差不多了，供大家学习参考！！！
大家先看效果
直接上代码（小伙伴可以直接拷出来运行！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
.ruller {
position: absolute;
width: 1082px;
top: 100px;
display: flex;
justify-content: space-between;
padding: 0 1px;
;
left: 50%;
transform: translateX(-50%);
}
.time-cursor {
position: absolute;
z-index: 2;
top: -29px;
left: -22px;
width: 48px;
height: 48px;
background-image: linear-gradient(-180deg, #FFFFFF 3%, #DBD6D0 100%);
border-radius: 50%;
cursor: grab;
color: red
}
.time-cursor:before {
content: "";
position: absolute;
top: 53px;
left: 23px;
display: block;
width: 1px;
height: 50px;
background-color: #F64E4D;
}
.time-cursor input {
pointer-events: none;
position: relative;
z-index: 1;
width: 48px;
height: 48px;
color: currentColor;
font-weight: 600;
background-color: transparent;
border-radius: 50%;
text-align: center;
font-size: 15px;
transform: translateZ(0);
}
.line {
width: 1px;
height: 12px;
background-color: currentColor;
}
.line:not(:last-child) {
margin-right: 3px;
}
.line:nth-child(9n+2) {
height: 20px;
}
.line:nth-child(90n+2) {
height: 32px;
}
</style>
</head>
<body>
<div class="ruller">
<div class="time-cursor color-red" style="transform: translateY(0px) translateX(403.11px) translateZ(0px);">
<input value="1">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
let $ = selector => document.querySelector.call(document, selector)
var cache = document.createDocumentFragment();
var lineArr = [],//所有线的数组
drapping = false,
initTranx = 50;//初始化input显示的值
var $ruller = $(".ruller"), $timeCursor = $(".time-cursor"), $input = $(".time-cursor input")
// 初始化标尺
for (var i = 0; i <= 270; i++) {
var div = document.createElement("div");
div.classList.add("line");
lineArr.push(div);//添加到缓存数组
cache.appendChild(div)
}
$ruller.appendChild(cache)
// 获取标尺的左边距离 和 宽度 。
var { left, width } = $ruller.getBoundingClientRect();
var { width: widthCursor } = $timeCursor.getBoundingClientRect();
//初始化滑动
$timeCursor.setAttribute("style", `transform:translate3d(${initTranx * 4}px,0px,0px)`)
setLines(lineArr, initTranx)
$input.value = initTranx
//设置默认线的偏移
function setLines(lineArr, initTranx) { // 线的数组，初始化
var index = Math.min(~~(initTranx), 270); //当前的索引
let step = 0; // 计步器 ，
//从 当前的 索引的前12个开始，到当前索引的后12个, 比如从 38 - 62 区间
for (let i = index - 12, len = Math.min(index + 12, 270); i <= len; i++) {
var tranYY = (Math.sin(step) * 24).toFixed(3);
if (lineArr[i]) {
lineArr[i].setAttribute("style", `transform:translate3d(0px,${tranYY}px,0px)`)
}
step += 0.1308 // 3.14/24 就是把PI分为 24 分
}
}
$timeCursor.addEventListener("mousedown", function (event) {
event.preventDefault();
var offsetX = event.offsetX; //鼠标距离当前节点的左偏移
var cursor = this;
this.style.cursor = "grabbing"
let move = _.throttle(function (event) {
event.preventDefault();
event.stopPropagation()
if (drapping) return
drapping = true
var delta = event.clientX - left - (offsetX - widthCursor / 2); //中心点距离左边的偏移量
var deltaW = Math.max(0, Math.min(width, delta))
cursor.setAttribute("style", `transform:translate3d(${deltaW}px,0px,0px)`)
var index = Math.max(0, Math.min(~~(delta / 4), 270));
let step = 0;
for (let i = -12; i <= 270; i++) {
if (i >= index - 12 && i <= Math.min(index + 12, 270)) {
var tranYY = (Math.sin(step) * 24).toFixed(3);
if (lineArr[i]) {
lineArr[i].setAttribute("style", `transform:translate3d(0,${tranYY}px,0)`)
}
step += 0.1308
} else {
if (i > 0 && lineArr[i].getAttribute("style") != 'transform:translate3d(0,0,0)') {
lineArr[i].setAttribute("style", `transform:translate3d(0,0,0)`)
}
}
}
drapping = false
$input.value = index
}, 0, { leading: false })
document.addEventListener("mousemove", move, false)
document.addEventListener("mouseup", function () {
drapping = false
$timeCursor.style.cursor = "grab"
document.removeEventListener("mousemove", move, false)
}, false)
}, false)
</script>
</html>
我把代码运行的效果给大家贴出来！
这个案例对于正在学习DOM操作的小伙伴是一个非常棒的练习项目！！！
