彩虹进度条

最新推荐文章于 2021-06-09 16:34:23 发布

weixin_34082695

最新推荐文章于 2021-06-09 16:34:23 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/weixin_34082695/article/details/85082387

版权

彩虹进度条

这是一款开发彩虹进度条，在广告制作中也常应用到的，是一款很流行的动画软件。

彩虹进度条

彩虹进度条

   <html>
	<head>
		<style>
			#bg{
				position:absolute;
				left:0;
				top:0;
				width:200%;
				height:200%;
				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. 减少绿色
		// 5. 增加粉红色
		// 6. 减少紫色
		// 7. 增加×××
		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>

动画中映带彩虹，很有色彩。我并在其加入几种色彩有紫色、粉红色；色彩挺让人喜欢。

以下是彩虹进度条图片：

彩虹进度条.png

weixin_34082695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彩虹进度条

彩虹进度条这是一款开发彩虹进度条，在广告制作中也常应用到的，是一款很流行的动画软件。彩虹进度条彩虹进度条 &lt;html&gt; &lt;head&gt; &lt;style&gt; #bg{ position:absolute; left:0; top:0; width:200%; height:200%;...
复制链接

扫一扫