<html>
<head>
<style>
#bg{
position:absolute;
left:0;
top:0;
100%;
height:100%;
background:#000;
font-size:40px;
color:#ccc;
text-align:center;
}
#colorLine{
400px;
}
#colorLine div{
5px;
height:2px;
float:left;
overflow:hidden;
}
</style>
</head>
<body>
<table id="bg">
<tr height="300">
<td>
彩虹进度条
</td>
</tr>
<tr height="100">
<td align=center>
<div id="colorLine">
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
<script>
var IE6 = navigator.userAgent.toLowerCase().indexOf('ie')+1 &&
/MSIE (5\.5|6\.)/i.test(navigator.userAgent);
var CL = document.getElementById('colorLine');
//创建彩虹条
function makeCLine(){
var r = 255;
var g = 0;
var b = 0;
var step = 1;
// 1. 增加绿色
// 2. 减少红色
// 3. 增加蓝色
// 4. 减少绿色
for(var i = 0; i < 80; i ++ ){
var node = document.createElement('div');
if(g > 255 && step == 1)
step = 2;
if(r < 0 && step == 2)
step = 3;
if(b > 255 && step == 3)
step = 4;
node.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
CL.appendChild(node);
if(step == 1)
g += 14;
if(step == 2)
r -= 14;
if(step == 3)
b += 14;
if(step == 4)
g -= 14;
}
var oNodeL = IE6 ? CL.firstChild : CL.firstChild.nextSibling;
var oNodeR = CL.lastChild;
//制作两端渐变效果
for(var i = 0; i < 20; i ++ ){
oNodeL.style.cssText += ';opacity:'+ (0.05 * i) +
';filter:Alpha(Opacity=' + (0.05 * i * 100) +')';
oNodeR.style.cssText += ';opacity:'+ (0.05 * i) +
';filter:Alpha(Opacity=' + (0.05 * i * 100) +')';
oNodeL = oNodeL.nextSibling;
oNodeR = oNodeR.previousSibling;
}
}
//移动彩虹条
function makeCLMove()
{
var colors = [];
for(var i = CL.lastChild; i; i = i.previousSibling)
{
if(i.style)
colors.unshift(i.style.backgroundColor);
}
var flag = 1;
var j = 0;
setInterval(function()
{
var sTempColor = CL.lastChild.style.backgroundColor;
var oNodeL = IE6 ? CL.firstChild : CL.firstChild.nextSibling;
for(var i = CL.lastChild; i; i = i.previousSibling)
{
if(i.previousSibling && i.previousSibling.style)
i.style.backgroundColor = i.previousSibling.style.backgroundColor;
}
if(j > (colors.length - 1))
flag = 0;
else if(j < 1)
flag = 1;
oNodeL.style.backgroundColor = flag ? colors[j ++ ] : colors[j -- ];
}, 1);
}
makeCLine();
makeCLMove();
</script>