基于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小时内删除。
发表评论