當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

彩虹进度条

發布時間：2025/7/14 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了彩虹进度条小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

彩虹進度條

???????? 這是一款開發彩虹進度條，在廣告制作中也常應用到的，是一款很流行的動畫軟件。

??? 彩虹進度條

彩虹進度條<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>

??? 動畫中映帶彩虹，很有色彩。我并在其加入幾種色彩有紫色、粉紅色；色彩挺讓人喜歡。
?

?? ? ? ? ? 以下是彩虹進度條圖片：

? ? ? ? ? ? ? ? ?

? ? ? ? ? ?
?

轉載于:https://blog.51cto.com/1572091hyl10/402069

總結

以上是生活随笔為你收集整理的彩虹进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。