移动的彩虹

简介:           #bg{     position:absolute;     left:0;     top:0;     width:100%;     height:100%;     background:#000;     f...

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

相关文章
|
6月前
|
前端开发
例举一些常见的中国古典色,总有一款靓到你!
例举一些常见的中国古典色,总有一款靓到你!
153 1
例举一些常见的中国古典色,总有一款靓到你!
|
5月前
|
存储 算法 数据可视化
【漫画算法】哈希表:古代皇帝的秘密魔法书
【漫画算法】哈希表:古代皇帝的秘密魔法书
|
数据安全/隐私保护
[MRCTF2020]古典密码知多少 1
[MRCTF2020]古典密码知多少 1
259 0
|
JSON 数据格式 Windows
这么可爱的彩虹屁老婆,真的不想“娶”一个放桌面上吗?
这么可爱的彩虹屁老婆,真的不想“娶”一个放桌面上吗?
213 0
|
数据采集 机器人 API
彩虹屁机器人 开心每一天
彩虹屁机器人 开心每一天
175 0
彩虹屁机器人 开心每一天
|
存储 并行计算 算法
转 (总结)密码破解之王:Ophcrack彩虹表(Rainbow Tables)原理详解(附:120G彩虹表下载)
转 (总结)密码破解之王:Ophcrack彩虹表(Rainbow Tables)原理详解(附:120G彩虹表下载)
435 0
转 (总结)密码破解之王:Ophcrack彩虹表(Rainbow Tables)原理详解(附:120G彩虹表下载)
|
PHP
彩虹外链网盘美化版
一款PHP网盘与外链分享程序,支持所有格式文件的上传,可以生成文件外链、图片外链、音乐视频外链,生成外链同时自动生成相应的UBB代码和HTML代码,还可支持文本、图片、音乐、视频在线预览,这不仅仅是一个网盘,更是一个图床亦或是音乐在线试听网站。新版本增加了图片违规检测,对接阿里云内容安全服务。
422 0
彩虹外链网盘美化版
|
程序员
为什么程序员用笛卡尔心形曲线告白的人,都还是单身?
为什么程序员用笛卡尔心形曲线告白的人,都还是单身?
241 0
为什么程序员用笛卡尔心形曲线告白的人,都还是单身?
L2-032 彩虹瓶 (25 分)
L2-032 彩虹瓶 (25 分)
100 0
L2-032 彩虹瓶 (25 分)