自定义拖动进度条,包含样式和事件
2018-09-18 06:33:24来源:博客园 阅读 ()
自定义可拖动的进度条,如下图效果:
代码分三部分
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 来计算,如果有其他想法欢迎留言探讨
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:浏览器内核
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
- Bootstrap4 按钮组+徽章(Badges)+进度条+分页+列表组 2020-04-16
- css 自定义滚动条样式 2020-04-07
- html有序无序自定义列表 2020-03-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash