锐客网

  1. 首页 > 生活百科 > it技术 > >

移动的彩虹

IT知识移动彩虹

千磨万击还坚劲，任尔东西南北风。这篇文章主要讲述移动的彩虹相关的知识，希望能为你提供帮助。


< 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>


【移动的彩虹】


    推荐阅读


    上一篇：#yyds干货盘点#Hystrix

    下一篇：ADO.NET 数据连接查询