介绍一个比较6的网站：Element.setPointerCapture() - Web API 接口参考 | MDN
里面用到的setPointerCapture，getBoundingClientRect方法都是这个网站里面有的
（看看效果图，动态图我不知道怎么搞，简单来说就是没拉到底部会退回初始的地方，到达了底部就会变成那个有√的图片）
<!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>滑动</title><style>* {margin: 0;padding: 0;}#slider {width: 60px;height: 50px;align-items: center;justify-content: center;background: rgb(182, 162, 177);position: relative;background-image: url(./images/right.png);background-size: 100% 100%;}body {user-select: none;}</style>
</head><body><div id="box" style="width: 800px;background-color: aqua;display: flex;margin:0 auto;"><div id="slider"></div></div><script>let slider = document.getElementById('slider'); slider.onpointerdown = beginSliding;let slidersz = slider.getBoundingClientRect();let box = document.getElementById("box")let rect = box.getBoundingClientRect();let movevol;function beginSliding(e) {function slide(e) {var movevol = e.clientX - oldpos.x;movevol = Math.min(rect.width - slidersz.width, movevol)// console.log(movevol+"sssss")movevol = Math.max(movevol, 0)slider.style.left = movevol + "px";//如果拉到底了背景图片变成√if (movevol + "px" == 740 + "px") {slider.style.backgroundImage = "url(./images/suff.png)"}}var oldpos = { x: e.clientX, y: e.clientY };// console.log(oldpos.x+"aaaaaaaa")document.onpointermove = slide;document.onpointerup = stopSliding;slider.setPointerCapture(e.pointerId);}function stopSliding(e) {//如果没有验证成功则返回if (e.clientX < 740) {slider.style.left = 0 + "px";}document.onpointermove = null;document.onpointerup = null;slider.releasePointerCapture(e.pointerId);}</script>
</body></html>
