自己基于豆瓣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插件，还有很大值得改进的地方~~
原文地址：https://www.cnblogs.com/Hope-li/p/8379927.html
时间： 2024-12-13 02:52:39