当前位置： 移动技术网 > IT编程>网页制作>CSS > 自定义拖动进度条，包含样式和事件

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

2018年09月15日  | 移动技术网IT编程  | 我要评论

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

代码分三部分

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 来计算，如果有其他想法欢迎留言探讨

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网