html自定义拖动进度条，包含样式和事件

更新日期: 2018-09-20阅读: 6.5k标签: 进度条分享

复制链接

新浪微博

QQ 好友

扫一扫分享

自定义可拖动的进度条，如下图效果：

代码分三部分

html

<body>
    <div id="demo">

        <div class="progress">
            <div class="progress-bar">
                <div class="progress-thumb"></div>
            </div>
        </div>

    </div>
</body>

css

#demo { 
    width: 600px; height: 100px; margin: 100px auto; 
    display: flex; align-items: center; 
}

#demo .progress { 
    width: 100%; height: 6px; border-radius: 3px; 
    background: #F1F5FD; 
}

#demo .progress .progress-bar { 
    width: 40%; height: 100%; border-radius: 3px; 
    background: #0072FF; 
}

#demo .progress .progress-bar .progress-thumb { 
    width: 14px; height: 14px; border-radius: 50%; 
    background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF; 
    float: right; 
    position: relative; left: 7px; top: -5px; 
}

到这步就基本实现了自定义的样式，只需改变 .progress-bar 的 width 就能显示不同的进度；接下来给进度条加上拖动事件

JavaScript

<script>
           
        var slider = {
            use: function(id) {
                var self = this;
                self.slider = document.getElementById(id);
                self.bar = self.slider.querySelector('.progress-bar');
                self.thumb = self.slider.querySelector('.progress-thumb');
                self.slider.addEventListener('mousedown', function(e) {
                    if (e.button == 0) { // 判断点击左键
                        self.mDown = true;
                        self.beginX = e.offsetX;
                        self.positionX = e.offsetX;
                        self.beginClientX = e.clientX;
                        self.sliderLong = parseInt(self.getStyle(self.slider, 'width'));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                    }
                });
                document.addEventListener('mousemove', function(e) {
                    if (self.mDown) {
                        var moveX = e.clientX - self.beginClientX;
                        self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                    }
                });
                document.addEventListener('mouseup', function(e) {
                    if (e.button == 0) { 
                        self.mDown = false;
                    }
                });
            },
            getStyle: function(obj,styleName){ // 获取元素样式的方法
                if(obj.currentStyle){
                    return obj.currentStyle[styleName];
                }else{
                    return getComputedStyle(obj,null)[styleName];
                }
            }
        };
        slider.use('demo');

    </script>

关于本篇随笔，作者的考虑：

1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验

2. JS 用纯原生语法书写，如果用 jquery 可以简化选择器和 CSS 样式的获取

3. 鼠标在滚动条外的移动，本文使用 clientX 来计算

来源：http://www.cnblogs.com/liangzhengxiong/p/9650342.html

链接: https://fly63.com/article/detial/1099

html自定义拖动进度条，包含样式和事件

CSS3+JS实现静态圆形进度条

原生JS+CSS或HTML5实现简单的进度条和滑动条效果

jQuery 实现一个文章阅读进度条功能

利用canvas实现环形进度条

在vue项目中使用Nprogress.js进度条

svg生成环形进度条

js实现进度条代码

css进度条怎么写？

AngularJS实现进度条功能示例

纯css设置单选框/进度条样式