资讯专栏INFORMATION COLUMN

javascript实现彩虹加载条

tommego / 1584人阅读

HTML



    
    Document
    


    
彩虹进度条
js
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 = CL.firstChild;
    var oNodeR = CL.lastChild;

    for(var i = 0; i < 20; i ++){
        oNodeL.style.cssText += ";opacity:" + (0.05 * i);
        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 = CL.firstChild;
            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--];
                }
            }
        
        }, 100)    
    }
}
       
makeCLine();
setInterval("makeCLmove()","10")

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80079.html

相关文章

  • javascript实现彩虹加载

    HTML Document #bg{ position:absolute; left: 0; top:0; width: 100%; height:100%; background-color:#000; text-align: center; ...

    zone 评论0 收藏0
  • Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南

    摘要:实现彩虹画笔绘画板指南作者简介是推出的一个天挑战。这部分不涉及内容,全部由来实现。实现彩虹画笔绘画板效果图项目源码分析源码获取节点支持不支持彩虹效控制笔触大小控制绘制路径源码分析宽高设置属性笔触的形状,有圆平方三种。 Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑...

    Ajian 评论0 收藏0

发表评论

0条评论

tommego

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<