原生js 滑块滑动效果（音量滑动，进度条等，都可引用）

最新推荐文章于 2024-10-14 23:34:35 发布

kongziyong

最新推荐文章于 2024-10-14 23:34:35 发布

阅读量4.7k

点赞数 5

本文链接：https://blog.csdn.net/kongziL/article/details/89387374

版权

本文介绍如何使用原生JavaScript实现滑块滑动效果，适用于音量控制和进度条等场景。通过设置HTML元素的`pointer-events: none`以避免鼠标事件，结合JS获取标签的宽度和高度，并监听`mousemove`事件来确保滑动功能在页面任何位置都能正常工作。

摘要由CSDN通过智能技术生成

html部分

拖动滑块，用到的知识点

在barBox上添加事件， pointer-events: none;//不接受鼠标事件可以添加音量控制，进度控制
JS获取标签的宽度：xx.offsetWidth
高度就是:xx.offsetHeight
把mousemove写在document上，保证事件在页面中任何位置都有效。包括在标签外。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/huakuai.css">
</head>
<body>

<div class="barBox" id="barBox">
    <div class="barColor" id="barColor"></div>
    <div class="barBlock" id="barBlock"></div>
</div>



<script src="js/huakuai.js"></script>
</body>
</html>

css部分

.barBox{
    margin: 100px;
    height: 30px;
    width: 200px;
    background

最低0.47元/天解锁文章

kongziyong

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫