可拖动的进度条是如何制作的？本章给大家带来js实现自定义拖动进度条效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
先看看效果图：
实例代码分三部分：
HTML部分：
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部分：
说明：
1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验；
2. JS 用纯原生语法书写，如果用 JQuery 可以简化选择器和 CSS 样式的获取；
3. 鼠标在滚动条外的移动，使用了 clientX 来计算。
Das obige ist der detaillierte Inhalt vonjs实现自定义拖动进度条效果（代码实例）. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
