基于Jquery的⾳乐播放器进度条插件  ⾃⼰基于⾖瓣FM的ui仿写qq⾳乐时，基于Jquery⼿写的进度条插件，效果图如下：
  主要特⾊：
    ①可⾃适应挂载元素的宽度，也可以⾃⼰设置进度条宽度；
    ②⽀持部分默认参数修改（具体见使⽤说明）；
    ③允许最⼤时间为23:59:59，⾼于此值将默认修改为此值；
    ④可以⾃⼰控制进度条动画的开关及重置；
location什么意思中文    ⑤可以获取进度条当前时间和宽度，与H5的audio标签协调使⽤。
  使⽤说明：
/*
* 功能描述：播放器进度条
* 参数：
*            option：挂载⽗元素
*            inTime：进度条时间长度
* ⽰例:
*            $.playBar.addBar($('.wrap'),400);    -- 初始化进度条
*            $.playBar.setDefault({              -- 默认参数修改
*                width:200,                            -- 进度条宽度
*                bgColor:'blue',                        -- 进度条背景颜⾊
*                progressColor:'red',                  -- 进度条颜⾊
*                ballColor:'yellow',                    -- 拖动触发⼩圆球颜⾊
*                beginColor:'lightgrey',                -- 初始时间字体颜⾊
round函数公式不会自动变化
*                finishColor:'gray'                      -- 结束时间字体颜⾊
*            })
*            $.playBar.beginPlay();              -- 播放进度条
*            $.dPlay();                -- 结束播放进度条
*            $.setPlay(200);            -- 重置进度条，参数为新输⼊时间
*/
  插件源码：
(function($,document){
//定义初始化变量、⽅法构造函数
var InitVariables = function(){
this.barWidth = null;                    //进度条宽度
this.barTime = null;                    //进度条展⽰时间
this.timer = null;                      //记录播放定时器
this.curTime = 0;                        //记录当前播放时间
this.curWidth = 0;                      //记录当前播放时间对应的宽度
this.ballEl = null;
this.timeBeginEl = null;
this.timeEndEl = null;
this.bgEl = null;
update我一下是什么意思this.curTimeEl = null;
}
InitVariables.prototype = {
'setWidth':function(w){                    //设置进度条宽度
this.barWidth = w;
this.bgEl.width(w);
},
'setTime':function(t){                    //设置进度条时间
this.barTime = t;
jquery下载文件插件},
'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.timer=setInterval(that.changeBar.bind(this),1000);
},
'stopPlay':function(){                    //停⽌运动指令
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();setPlay();}
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;
<('mousedown',function(ev){
万维网的概念
var e=ev||document.event;
var disX=event.clientX;
e.preventDefault();
e.stopPropagation();
if (Off){ 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 (Off){ 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);
//载⼊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();
//绑定滑动事件
},
'beginPlay':function(){
init.beginPlay();
},
'endPlay':function(){
init.stopPlay();
},
'resetPlay':function(time){
init.setTime(time);
},
'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插件，还有很⼤值得改进的地⽅~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。