发布一个带呼吸灯效果的函数changeColor

折腾了一晚上，终于自己全程手写出一个颜色渐变的函数，很兴奋的感觉，之前做出来的，不是渐变，是闪烁

目前在FF、IE6-8都可以用，反而IE9不行了，还不知道什么原因

先上代码吧

 

工具类：

    //工具:获取真正样式
    myBlog.tools.getStyle = function (obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        };
    };

 

说明下这个颜色转换为十六进制数（字符串），因为在DOM标准下，直接用getStyle这个函数调用出来的是rgb的写法，但是在IE下却是十六进制的写法，所以要做兼容

    //工具：颜色转换为十六进制     sColor:传入的颜色，一般为rgb(255,255,255)格式
    myBlog.tools.colorToHex = function(sColor){
        var aResult = [];
        if(sColor.substr(0,1) == "r"){
            aResult = sColor.split(",");
            aResult[0] = aResult[0].substr(4);//数组的第一位特殊处理
            for(var i = 0 ;i < aResult.length;i++){
                aResult[i] = parseInt(aResult[i]).toString(16);
            };
        }else if(sColor.substr(0,1) == "#"){ 
            if(sColor.length < 6){
                sColor = sColor.substr(1);
                for(var i = 0 ;i < sColor.length;i++){
                    aResult[i] = sColor.substr(i,1);
                    aResult[i] += aResult[i];
                };
            };
        };
        return aResult;
    };

 

这个转十进制的就不用多说了，一看就明了

    //工具：十六进制转换为十进制
    myBlog.tools.hexToDem = function(hex){
        return parseInt("0x" + hex);
    };

 

接下来是重头戏，这个是写得最久的，也是我认为的难点：

//程序：颜色渐变  iTarget必须是十六进制的颜色值，非缩写
    myBlog.app.changeColor = function(obj,iTarget){
        clearInterval(obj.timer)
        if(iTarget.length < 6 ){
            return "alert('传入的颜色必要是6为十六进制数')";
        }else{
            var rgb = [],
                    sIntColor = [],
                    sCurColor = [],
                    sChColor = [],
                    iSpeed = [],
                    temp = [];
            sCurColor =myBlog.tools.colorToHex( myBlog.tools.getStyle(obj,"color") );
            for(var i = 0; i <iTarget.length / 2; i++){
                rgb[i] = myBlog.tools.hexToDem(iTarget.substr(2*i,2));
                sIntColor[i] = sCurColor[i] = myBlog.tools.hexToDem(sCurColor[i])
            };
            
            for(var i = 0 ; i< sCurColor.length; i++){
                iSpeed[i] = Math.floor((rgb[i] - sCurColor[i]) / 30);
            };
            
            obj.timer = setInterval(function(){
                    for(var i = 0;i<3;i++){                
                        //如果低于0或者是大于255 就是赋值为0或255
                        if(Math.abs(sCurColor[i] - rgb[i]) <= 10){
                            sCurColor[i] = rgb[i];
                        }else{
                            sCurColor[i] = sCurColor[i] + iSpeed[i];
                        }
                        sChColor += sCurColor[i].toString(16);
                    };                    
                    obj.style.color = "#" + sChColor;
                    if(rgb.join(",") == sCurColor.join(",")){
                        //clearInterval(obj.timer);
                        temp = rgb;
                        rgb = sIntColor;
                        sIntColor = sCurColor;
                        sCurColor = temp;
                        for(var i = 0;i<iSpeed.length;i++){
                            iSpeed[i] *= -1;
                        };
                    };
                    sChColor = "";
                },50);
        };