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

番茄西红柿发布于2019-04-23 13:23 / 1201人阅读

摘要：自定义可拖动的进度条，如下图效果代码分三部分到这步就基本实现了自定义的样式，只需改变的就能显示不同的进度接下来给进度条加上拖动事件

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

代码分三部分

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

混合云专线服务自定义进度条 android进度条样式进度自定义自定义按钮样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1800.html

基于Vue的事件响应式进度条组件

摘要：事件响应式进度条的应用场景主要是自定义播放器的进度条。效果图以上就是可以利用本组件实现的一些效果，他们都能响应和两种事件。部分对现在就有需求使用这个带事件的进度条的同学来说，看看这部分，可以帮助你自己修改完善它。写在前面找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的...

renweihub 2019-08-26 11:36 评论0 收藏0
鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件

摘要：步骤设置控件监听事件，重新生成验证区域在文件中添加控件在文件中添加控件，用于显示旋转验证的动态效果。先实例化一个随机数对象，用于后续计算随机生成的旋转验证块角度值。前言基于安卓平台的滑动拼## 二级标题图验证组件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...

Amos 2021-11-23 09:51 评论0 收藏0
audio自定义简易音频播放器

摘要：先看一下效果点击这里查看当然源代码也都在这个文件里啦功能播放暂停音频轨迹随意拖动播放时间及总时间静音实现逻辑当然最终还是使用的的的相关实现的首先写好播放器相关的样式并且隐藏默认的播放器然后就是一步步实现逻辑啦播放暂停播放音频暂停音频音频的播先看一下效果: 点击这里查看DEMO, 当然源代码也都在这个文件里啦; showImg(https://segmentfault.com/img/...

Tamic 2019-08-20 10:25 评论0 收藏0