天天看点
返回

移动的彩虹

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

  <tr>

   <td></td>

 </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) +

        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>

Web App开发 实战快速搭建移动应用 oss快速搭建移动应用 移动开发快速搭建移动应用 sap移动应用 oss移动开发快速搭建
上一篇: ADO.NET 数据连接查询
下一篇: C#中的访问修饰符

继续阅读