移动的彩虹
Posted mb61b856e04bb98
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动的彩虹相关的知识，希望对你有一定的参考价值。
<html>
<head>
<style>
#bg
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#000;
font-size:40px;
color:#ccc;
text-align:center;
#colorLine
width:400px;
#colorLine div
width:5px;
height:2px;
float:left;
overflow:hidden;
</style>
</head>
<body>
<table id="bg">
<tr >
<td>
彩虹进度条
</td>
</tr>
<tr >
<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>
以上是关于移动的彩虹的主要内容，如果未能解决你的问题，请参考以下文章