移动的彩虹-白红宇

移动的彩虹

阅读量：5238 次

发布时间：2019-06-14

本文共 2240 字，大约阅读时间需要 7 分钟。

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

<td>

彩虹进度条

</td>

</tr>

</div>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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>

转载于:https://www.cnblogs.com/dingxiaowei/archive/2012/11/04/3058788.html

你可能感兴趣的文章

微信小程序 movable-view组件应用：可拖动悬浮框_返回首页

Windows多线程入门のCreateThread与_beginthreadex本质区别（转）

查看>>

Nginx配置文件（nginx.conf）配置详解1

查看>>

linux php编译安装

查看>>

name phone email正则表达式

hihoCoder 1233 : Boxes（盒子）

查看>>

oracle中anyData数据类型的使用实例

查看>>

C++对vector里面的元素排序及取任意重叠区间