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

2021-01-20 03:13

阅读：602

标签：视频播放器获取元素用户 compute 进度条 div 播放器 arp offsetx

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

技术图片

代码分三部分

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; 
}

Pexelshttps://www.wode007.com/sites/73241.html 天堂图片网https://www.wode007.com/sites/73243.html

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

JavaScript

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

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

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

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

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

标签：视频播放器获取元素用户 compute 进度条 div 播放器 arp offsetx

原文地址：https://www.cnblogs.com/ypppt/p/13326409.html

上一篇：【网络】从套接字到Web服务器

下一篇：js获取关闭浏览器事件

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：html自定义拖动进度条，包含样式和事件
文章链接：http://soscw.com/index.php/essay/44352.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章