自定义拖动进度条，包含样式和事件
程序员文章站
2022-06-20 23:42:32
自定义可拖动的进度条，如下图效果： 代码分三部分 HTML CSS 到这步就基本实现了自定义的样式，只需改变 .progress-bar 的 width 就能显示不同的进度；接下来给进度条加上拖动事件 JavaScript 关于本篇随笔，作者的考虑： 1. 将 mousedown 事件绑定在进度条的 ......
自定义可拖动的进度条，如下图效果：
代码分三部分
html
1 <body> 2 <div id="demo"> 3 4 <div class="progress"> 5 <div class="progress-bar"> 6 <div class="progress-thumb"></div> 7 </div> 8 </div> 9 10 </div> 11 </body>
css
1 #demo {
2 width: 600px; height: 100px; margin: 100px auto;
3 display: flex; align-items: center;
4 }
5
6 #demo .progress {
7 width: 100%; height: 6px; border-radius: 3px;
8 background: #f1f5fd;
9 }
10
11 #demo .progress .progress-bar {
12 width: 40%; height: 100%; border-radius: 3px;
13 background: #0072ff;
14 }
15
16 #demo .progress .progress-bar .progress-thumb {
17 width: 14px; height: 14px; border-radius: 50%;
18 background: #ffffff; box-shadow: 0 0 15px 5px #0072ff;
19 float: right;
20 position: relative; left: 7px; top: -5px;
21 }
到这步就基本实现了自定义的样式，只需改变 .progress-bar 的 width 就能显示不同的进度；接下来给进度条加上拖动事件
javascript
1 <script>
2
3 var slider = {
4 use: function(id) {
5 var self = this;
6 self.slider = document.getelementbyid(id);
7 self.bar = self.slider.queryselector('.progress-bar');
8 self.thumb = self.slider.queryselector('.progress-thumb');
9 self.slider.addeventlistener('mousedown', function(e) {
10 if (e.button == 0) { // 判断点击左键
11 self.mdown = true;
12 self.beginx = e.offsetx;
13 self.positionx = e.offsetx;
14 self.beginclientx = e.clientx;
15 self.sliderlong = parseint(self.getstyle(self.slider, 'width'));
16 var per = parseint(self.positionx / self.sliderlong * 100);
17 self.bar.style.width = per + '%';
18 }
19 });
20 document.addeventlistener('mousemove', function(e) {
21 if (self.mdown) {
22 var movex = e.clientx - self.beginclientx;
23 self.positionx = (self.beginx + movex > self.sliderlong) ? self.sliderlong : (self.beginx + movex < 0) ? 0 : self.beginx + movex;
24 var per = parseint(self.positionx / self.sliderlong * 100);
25 self.bar.style.width = per + '%';
26 }
27 });
28 document.addeventlistener('mouseup', function(e) {
29 if (e.button == 0) {
30 self.mdown = false;
31 }
32 });
33 },
34 getstyle: function(obj,stylename){ // 获取元素样式的方法
35 if(obj.currentstyle){
36 return obj.currentstyle[stylename];
37 }else{
38 return getcomputedstyle(obj,null)[stylename];
39 }
40 }
41 };
42 slider.use('demo');
43
44 </script>
关于本篇随笔，作者的考虑：
1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验；
2. js 用纯原生语法书写，如果用 jquery 可以简化选择器和 css 样式的获取；
3. 鼠标在滚动条外的移动，本文使用 clientx 来计算，如果有其他想法欢迎留言探讨