自己基于豆瓣FM的ui仿写qq音乐时，基于Jquery手写的进度条插件，效果图如下：
主要特色：
① 可自适应挂载元素的宽度，也可以自己设置进度条宽度；
② 支持部分默认参数修改（具体见使用说明）；
③ 允许最大时间为23:59:59，高于此值将默认修改为此值；
④ 可以自己控制进度条动画的开关及重置；
⑤ 可以获取进度条当前时间和宽度，与H5的audio标签协调使用。
使用说明：
/* * 功能描述：播放器进度条 * 参数： * option:挂载父元素 * inTime:进度条时间长度 * 示例: * $.playBar.addBar($(\'.wrap\'),400); -- 初始化进度条 * $.playBar.setDefault({ -- 默认参数修改 * width:200, -- 进度条宽度 * bgColor:\'blue\', -- 进度条背景颜色 * progressColor:\'red\', -- 进度条颜色 * ballColor:\'yellow\', -- 拖动触发小圆球颜色 * beginColor:\'lightgrey\', -- 初始时间字体颜色 * finishColor:\'gray\' -- 结束时间字体颜色 * }) * $.playBar.beginPlay(); -- 播放进度条 * $.playBar.endPlay(); -- 结束播放进度条 * $.playBar.resetPlay(200); -- 重置进度条，参数为新输入时间 */
插件源码：
(function($,document){ //定义初始化变量、方法构造函数 var InitVariables = function(){ this.barWidth = null; //进度条宽度 this.barTime = null; //进度条展示时间 this.onOff = false; //记录进度条是否进行播放 this.timer = null; //记录播放定时器 this.curTime = 0; //记录当前播放时间 this.curWidth = 0; //记录当前播放时间对应的宽度 this.ballEl = null; this.timeBeginEl = null; this.timeEndEl = null; this.bgEl = null; this.curTimeEl = null; } InitVariables.prototype = { \'setWidth\':function(w){ //设置进度条宽度 this.barWidth = w; this.bgEl.width(w); }, \'setTime\':function(t){ //设置进度条时间 this.barTime = t; }, \'setBGColor\':function(color){ //设置进度条背景色 this.bgEl.css(\'background-color\',color); }, \'setProgressColor\':function(color){ //设置进度条颜色 this.curTimeEl.css(\'background-color\',color); }, \'setBallColor\':function(color){ //设置拖动小球颜色 this.ballEl.css(\'background-color\',color); }, \'setBeginColor\':function(color){ //设置起始时间 this.timeBeginEl.css(\'color\',color); }, \'setFinishColor\':function(color){ //设置结束时间 this.timeEndEl.css(\'color\',color); }, \'timeToString\':function(time){ //时间转00:00:00样式 if(time>24*3600){ console.log("Error In \'timeToString\'：输入时间超过允许值，已默认修改为24*3600-1"); time = 24*3600-1; } var strHour = parseInt(time/3600)>0 ? ((parseInt(time/3600)>9 ? \'\' : \'0\') + parseInt(time/3600)) : false; var strMinute = (parseInt(time/60%60)>9 ? \'\' : \'0\') + parseInt(time/60%60); var strSecond = (parseInt(time%60)>9 ? \'\' : \'0\') + parseInt(time%60); return strHour ? strHour+\':\'+strMinute+\':\'+strSecond: strMinute+\':\'+strSecond; }, \'beginPlay\':function(){ //开始运动指令 var that = this; this.onOff = !this.onOff; this.timer=setInterval(that.changeBar.bind(this),1000); }, \'stopPlay\':function(){ //停止运动指令 this.onOff = !this.onOff; clearInterval(this.timer); }, \'resetPlay\':function(){ //重置指令 this.curTime = 0; this.curWidth = 0; this.curTimeEl.css("width",this.curWidth); this.ballEl.css("left",this.curWidth-this.ballEl.width()/2); this.timeBeginEl.html(this.timeToString(this.curTime)); this.timeEndEl.html(this.timeToString(this.barTime)); }, \'changeBar\':function(){ //动态改变函数 this.curTime++; this.curWidth = this.curTime*this.barWidth/this.barTime; if (this.curWidth>=this.barWidth){this.stopPlay();this.resetPlay();} this.curTimeEl.css("width",this.curWidth); this.ballEl.css("left",this.curWidth-this.ballEl.width()/2); this.timeBeginEl.html(this.timeToString(this.curTime)); }, \'moveEvent\':function(ballEl,curTimeEl,contentEl){ //拖动函数 var that = this; ballEl.on(\'mousedown\',function(ev){ var e=ev||document.event; var disX=event.clientX; e.preventDefault(); e.stopPropagation(); if (that.onOff){ clearInterval(that.timer);} $(document).on(\'mousemove\',function(ev){ var e=ev||document.event; e.preventDefault(); var newX=event.clientX; var lefts=e.clientX-contentEl.offset().left; if (lefts>that.barWidth){ lefts=that.barWidth; }else if(lefts<0){ lefts=0; } that.curWidth = lefts; that.curTime = parseInt(that.curWidth/that.barWidth*that.barTime); that.curTimeEl.css("width",that.curWidth); that.ballEl.css("left",that.curWidth-that.ballEl.width()/2); that.timeBeginEl.html(that.timeToString(that.curTime)); }); $(document).on(\'mouseup\',function(){ if (that.onOff){ that.timer=setInterval(that.changeBar.bind(that),1000);} $(document).off(\'mousemove mouseup\'); }); }) } } //初始化变量对象 var init = new InitVariables(); $.playBar={ //初始化进度条 \'addBar\':function(option,inTime){ if (arguments.length<2){return false;} init.setTime(inTime); option.empty(); //载入DOM元素 option.append($( `<div class=\'progress-bar\'> <div class=\'progress-bar-begin\'>00:00</div> <div class="progress-bar-content"> <div class="progress-bar-ball"></div> <div class="progress-bar-cur"></div> </div> <div class="progress-bar-finish">${init.timeToString(inTime)}</div> </div> `)); //获取DOM元素 init.ballEl = $(\'.progress-bar-ball\'); init.timeBeginEl = $(\'.progress-bar-begin\'); init.timeEndEl = $(\'.progress-bar-finish\'); init.bgEl = $(\'.progress-bar-content\'); init.curTimeEl = $(\'.progress-bar-cur\'); //初始化进度条宽度 init.barWidth = init.bgEl.width(); //绑定滑动事件 init.moveEvent(init.ballEl,init.curTimeEl,init.bgEl); }, \'beginPlay\':function(){ init.beginPlay(); }, \'endPlay\':function(){ init.stopPlay(); }, \'resetPlay\':function(time){ init.setTime(time); init.resetPlay(); }, \'setDefault\':function(obj){ if(obj.width){init.setWidth(obj.width);} if(obj.bgColor){init.setBGColor(obj.bgColor);} if(obj.progressColor){init.setProgressColor(obj.progressColor);} if(obj.ballColor){init.setBallColor(obj.ballColor);} if(obj.beginColor){init.setBeginColor(obj.beginColor);} if(obj.finishColor){init.setFinishColor(obj.finishColor);} }, \'getCurTime\':function(){ return init.curTime; }, \'getCurWidth\':function(){ return init.curWidth; } } })(jQuery,document);
首次写jquery插件，还有很大值得改进的地方~~