文章目录

在做这个demo播放器的时候需要绘制一个进度条,首先想到肯定是两层不同颜色标签,改变内层的宽度来实现进度条改变效果。但是后面的那个小圆点怎么实现呢?很简单也是使用before即可,不需要再单独去写标签
取自html5 music player 项目 https://github.com/TivonJJ/html5-music-player

进度条的html
1
<div class="progressbar" id="progressbar"><span class="bar"></span></div>
进度条样式(LESS)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.progressbar{
-webkit-box-flex: 3;
height: 3px;
background-color: rgba(207, 203, 208, 1);
margin-top: 8px;
.bar{
display: block;
width: 0;
height: 100%;
background: rgb(82, 169, 235);
position: relative;
&:after{
content: " ";
position: absolute;
width: 8px;
height: 8px;
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ffffff;
right: -4px;
top: -3px;
-webkit-box-shadow: 0 0 1px 4px #52a9eb;
}
}
}

脚本控制进度条

progressbar.jsgithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
(function(window){
var $progressbar = $("#progressbar"),
bar = $progressbar.find(".bar");

$progressbar.progress = 0;
$progressbar.slideable = false;

$progressbar.setProgress = function(val){
if(val<0 || val>100)return;
bar.css({width:val+"%"});
$progressbar.progress = val;
};

$progressbar.bind("click",function(e){
if(!$progressbar.slideable)return;
var x = e.offsetX;
var width = $progressbar.offset().width;
var progress = Math.round(x/width*100);
$progressbar.setProgress(progress);
$progressbar.trigger("change");
});

var recod = {sx:0,cx:0,width:0};
var progressWidth = $progressbar.offset().width;
bar.bind("touchstart",function(evt){
if(!$progressbar.slideable)return;
recod.sx = evt.touches[0].pageX;
progressWidth = $progressbar.offset().width;
recod.width = bar.offset().width;
});
bar.bind("touchmove",function(evt){
if(!$progressbar.slideable)return;
recod.cx = evt.touches[0].pageX;
var width = recod.width + (recod.cx - recod.sx);
var progress = Math.round(width/progressWidth*100);
$progressbar.setProgress(progress);
$progressbar.trigger("sliding");
});
bar.bind("touchend",function(){
if(!$progressbar.slideable)return;
var mx = recod.cx - recod.sx;
if(Math.abs(mx)>2){
$progressbar.trigger("change");
}
recod = {sx:0,cx:0,width:0};
});

window.$progressbar = $progressbar;
})(window);

此文是本站原创,转载请标注作者和链接出处!