JS——实现音量控制拖动

最新推荐文章于 2023-10-26 09:03:52 发布

SSSkyCong

最新推荐文章于 2023-10-26 09:03:52 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Js H5 学习-总结-转载

本文链接：https://blog.youkuaiyun.com/qlwangcong518/article/details/86430864

描述：

JS——实现音量控制拖动
1）、有底条，有拖拽按钮
2）、设置最小和最大值
3）、拖动定位后，抛出事件当前的所在值

效果：

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #all {
            width: 500px;
            height: 86px;
            margin: 100px auto;
            position: relative;
        }

        #bar {
            width: 500px;
            height: 20px;
            border-radius: 10px;
            background: #9acfea;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            cursor: pointer;
        }

        #box {
            width: 30px;