自己基于豆瓣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插件，还有很大值得改进的地方~~