jQuery可拖动播放进度条

1、新建html文档。

2、书写hmtl代码。<div class="contral">停止</div><div class="test"></div>

3、书写css代码。body, html, div, ul, li, a { margin: 0; pad颊俄岿髭ding: 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、查看效果。