国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript實現彩虹加載條

tommego / 1585人閱讀

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/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元查看
<