$(function () {
/* 滑动条类
@param obj sliSlt 滑动条
@param obj sliBck 滑动块
@param obj numBox 颜色值框
@param obj sliMin 滑动范围最小值
@param obj sliMax 滑动范围最大值
*/
function slideBar(sliSlt,sliBck,numBox,sliMin,sliMax) {
this.sliSlt=sliSlt,
this.sliBck=sliBck,
this.numBox=numBox,
this.sliMin=sliMin,
this.sliMax=sliMax,
this.clr=255,
this.doc=$(document)
var _this=this
this.startDrag=function (evt1) {
//初始化
var inX=evt1.layerX || evt1.offsetX,
outLeft=_this.sliSlt.offset().left,
temX=0
//绑定mousemove事件
_this.doc.mousemove(function(evt2) {
temX=evt2.clientX-outLeft-1-inX
if(!_this.moveTo(temX,_this.sliMin,_this.sliMax)) return
_this.clr=parseInt(_this.calClr(temX))
_this.chgVal()
_this.setClrByRGB()
})
}
//移动滑块
this.moveTo=function (x,min,max) {
if(x<min || x>max) return false
_this.sliBck.css('left',x)
return true
}
//计算颜色值
this.calClr=function (x) {
return x*255/(_this.sliMax-_this.sliMin)
}
//改变颜色值
this.chgVal=function (c) {
c= c || _this.clr
_this.numBox.val(c)
}
//停止拖动
this.stopDrag=function () {
_this.doc.unbind('mousemove')
}
//设置颜色
this.setBodyClr=function (hexStr) {
$("body").css('backgroundColor',hexStr)
}
//设置#hexColor
this.setHexClr=function (hexStr) {
hexClrBox.val(hexStr)
}
//setColorByRGB
this.setClrByRGB=function () {
var hexStr=calcHexClr(clrBox.r.val(),clrBox.g.val(),clrBox.b.val())
_this.setBodyClr(hexStr)
_this.setHexClr(hexStr)
}
//绑定mousedown/up事件
this.sliBck.mousedown(function(evt) {_this.startDrag(evt)})
this.numBox.keydown(function(evt) {
if(evt.keyCode==13) {
if(!setPos()) return
_this.setClrByRGB()
}
})
this.doc.mouseup(_this.stopDrag)
}
var s1Slt=$("#cR"),s1Bck=$("#cR .slider"),s1Box=$("#cR .showBox"),
s2Slt=$("#cG"),s2Bck=$("#cG .slider"),s2Box=$("#cG .showBox"),
s3Slt=$("#cB"),s3Bck=$("#cB .slider"),s3Box=$("#cB .showBox"),
hexClrBox=$("#hexColor"),sliRag={min:0,max:495},randBtn=$("#randClr")
//创建类的实例
var s1=new slideBar(s1Slt,s1Bck,s1Box,sliRag.min,sliRag.max),
s2=new slideBar(s2Slt,s2Bck,s2Box,sliRag.min,sliRag.max),
s3=new slideBar(s3Slt,s3Bck,s3Box,sliRag.min,sliRag.max),
clrBox={
r:s1.numBox,
g:s2.numBox,
b:s3.numBox
}
//hexColor
hexClrBox.keydown(function(evt) {
if(evt.keyCode==13) {
hexStr=hexClrBox.val()
setClrByHex(hexStr)
}
})
//init
setClrByHex('#ABCDEF')
//由十六进制颜色值来设置
function setClrByHex(hexStr) {
var rgbClr=hexrgb(hexStr)
if(!rgbClr) return false
s1.numBox.val(rgbClr.r)
s2.numBox.val(rgbClr.g)
s3.numBox.val(rgbClr.b)
setPos()
s1.setHexClr(hexStr)
s1.setBodyClr(hexStr)
}
//设置位置
function setPos() {
var clr={r:parseInt(s1Box.val()),g:parseInt(s2Box.val()),b:parseInt(s3Box.val())}
if(!checkRGB(clr)) return false
var temp=sliRag.max-sliRag.min
s1Bck.css('left',clr.r*temp/255)
s2Bck.css('left',clr.g*temp/255)
s3Bck.css('left',clr.b*temp/255)
return true
}
//randBtn
randBtn.click(function () {
var clrVal={r:0,g:0,b:0}, animTime={r:0,g:0,b:0}
clrVal=objAsn(clrVal,0,495)
animTime=objAsn(animTime,500,800)
//修改并禁用按钮
randBtn.val('生成中…')
randBtn.attr('disabled','true')
//设置动画
crtAnim(s1Bck,{left:clrVal.r},animTime.r)
crtAnim(s2Bck,{left:clrVal.g},animTime.g)
crtAnim(s3Bck,{left:clrVal.b},animTime.b)
//动画时改变颜色及颜色值
var t= setInterval(function() {
rwVal(s1)
rwVal(s2)
rwVal(s3)
s1.setClrByRGB()
},60)
//动画结束后恢复按钮
setTimeout(function() {
randBtn.val('随机产生颜色')
randBtn.removeAttr('disabled')
clearInterval(t)
},findMax(new Array(animTime.r,animTime.g,animTime.b)))
//修改文本框的值
function rwVal(o) {
o.chgVal(parseInt(o.calClr(parseInt(o.sliBck.css("left")))))
}
//创建动画 o:创建动画的元素c:css集合t:动画时间
function crtAnim(o,c,t) {
o.animate(c,t,'swing')
}
})
//消息弹出窗口
var infoBtn=$('.infoBtn'),infoBrd=$('#infoBrd'),closeBtn=$('#infoBrd a'),infoIfr=$('#infoBrd iframe')
infoBtn.click(function () {
$('<p>',{'id':'loadTip',text:'Loading......'}).appendTo(infoBrd)
infoIfr.attr("src",this.href)
infoBrd.toggle('normal')
return false
})
closeBtn.click(function () {
infoBrd.toggle('fast')
infoIfr.removeAttr("src")
return false
})
infoIfr.load(function(){
$('p#loadTip').empty()
})
})
首先，我们制作的这个进度条并没有后台数据作为支撑，所以是一个靠js实现的一个简单的页面。我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。
我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。
然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。
这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们预设的时间后显示下载完成。
我们之前已经给p标签和progress标签分别赋予了不同的id，我们需要获取到这两个元素，并将他们赋给两个变量。
我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。
函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载时间。
1、不自定义进度条的话就只能用默认进度条，默认的进度条是集合在video标签中的，这个我们无法实现不能拖动，但是可以模拟下，你可以使用让鼠标点击到视频所在的video或者div的时候无效化，原理就是鼠标选不到进度条，自然不能拖动了。如果你是要可以控制播放和暂停的话就实现js控制，反正是跳过video自带的控制器自己去写。2、用个透明的层或图片把进度条盖住
