jQuery可拖动播放进度条

1、新建html文档。

2、书写hmtl代码。

<div class="contral">停止</div>

<div class="test"></div>

3、书写css代码。

body, html, div, ul, li, a { margin: 0; padding: 0; }

body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: "微软雅黑" }

body { background: #fff; text-align: center; background: #A69D9D; }

.BarControl { width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; }

.BarBeginTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }

.TheBar { position: relative; width: calc(100% - 114px); margin-left: 2px; height: 4px; border-radius: 2px; -moz-border-radius: 2px; background: #EBE8E8; overflow: visible; }

.TheColorBar { width: 0px; border-radius: 0px; -moz-border-radius: 0px; height: 100%; background: #3498DB; float: left; }

.TimeBall { width: 10px; height: 10px; border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }

.BarTimeBall { width: 10px; height: 10px; border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }

.BarFinishTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }

.BarBeginTime, .BarFinishTime, .TheBar { display: inline-block; vertical-align: middle; padding: 0px; }

4、书写并添加js代码。

<script src="js/jquery-1.8.3.min.js"></script> 

<script src="js/jquery-PlayBar.min.js"></script> 

<script>

$(function(){

var action=true;

$('.contral').click(function(){

if(action){

$.playBar.Stop();

action=false;

$(this).html("开始");

}else{

$.playBar.Begin();

action=true;

$(this).html("停止");

}

});

$.playBar.addBar($('.test'),1000*60);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒

$.playBar.changeBarColor("#72dfff");//设置进度条颜色

});

</script>

5、代码整体结构。

6、查看效果。