fadeColor类,实现背景色和前景色渐变动画效果

最近因为工作需要,得完成个背景色和前景色渐变动画效果。Jquery的animate好像不能实现这个功能,于是自己写了个。


test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="fadeColor1-2.js"></script>
<script type="text/javascript">
window.onload = function(){
    var test = document.getElementById("test");
    var fadeObj;
    fadeObj = new fadeColor(test);
    test.onmouseover = function(){
       fadeObj.fadeBgColor("#FFFFFF",1000);
       fadeObj.fadeForeColor("#000000",1000);
    };
    test.onmouseout = function(){
       fadeObj.fadeBgColor("#5d5c5c",1000);
       fadeObj.fadeForeColor("#FFFFFF",1000);
    };
}
</script>
</head>
<body>
<div style="width:100px; height:100px; background:#5d5c5c;color:#FFFFFF;" id="test">Test</div>
</body>
</html>

 

 

fadeColor1-2.js:

window.Sys = function (ua){
    var b = {
        ie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[///: ]([//d.]+)").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;   
    return b;
}(window.navigator.userAgent.toLowerCase());
function toHex(num){
    var str = "0"+num.toString(16);
    return str.substring(str.length-2);
}
function fadeColor(obj){
    this.obj = obj;
    this.bgTimer = null;
    this.foreTimer = null;
    this.FPS = 20;
};
fadeColor.prototype = {
    getSrcColor:function(flag){
        var srcColor,sR,sG,sB;
        if(flag){   //bgColor
            if(window.Sys.ie){
                srcColor = this.obj.currentStyle.backgroundColor
            }
            else{
                var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null);
                srcColor = myComputedStyle.backgroundColor
            }
        }
        else{   //foreColor
            if(window.Sys.ie){
                srcColor = this.obj.currentStyle.color
            }
            else{
                var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null);
                srcColor = myComputedStyle.color
            }
        }
        if(window.Sys.ie){
            sR = parseInt(srcColor.substring(1,3),16);
            sG = parseInt(srcColor.substring(3,5),16);
            sB = parseInt(srcColor.substring(5),16);
        }
        else{
            sR = srcColor.match(//d+/ig)[0];
            sG = srcColor.match(//d+/ig)[1];
            sB = srcColor.match(//d+/ig)[2];
        }
        return (eval("({sR:"+sR+",sG:"+sG+",sB:"+sB+"})"));
    },
    startTimer:function(destColor,duration,flag){
        var sR,sG,sB,dR,dG,dB,offR,offG,offB,stepR,stepG,stepB,srcColor,maxOffset,step;
        var _self = this;
        srcColor = _self.getSrcColor(flag);
        sR = srcColor.sR;
        sG = srcColor.sG;
        sB = srcColor.sB;    
        dR = parseInt(destColor.substring(1,3),16);
        dG = parseInt(destColor.substring(3,5),16);
        dB = parseInt(destColor.substring(5),16);    
        offR = dR - sR;
        offG = dG - sG;
        offB = dB - sB;
        maxOffset = Math.max(Math.abs(offR),Math.abs(offG));
        maxOffset = Math.max(maxOffset,Math.abs(offB));
        step = Math.ceil(maxOffset/Math.round(_self.FPS/1000*duration));
        stepR = (offR == 0 ? 0 : step * (offR / Math.abs(offR)));
        stepG = (offG == 0 ? 0 : step * (offG / Math.abs(offG)));
        stepB = (offB == 0 ? 0 : step * (offB / Math.abs(offB)));
        if(flag){  //bgColor
            _self.bgTimer = setInterval(function(){
                sR += stepR;
                sG += stepG;
                sB += stepB;
                sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR));
                sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG));
                sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB));
                if(sR == dR && sG == dG && sB == dB){
                    clearInterval(_self.bgTimer);
                }
                _self.obj.style.backgroundColor = "#"+toHex(sR)+toHex(sG)+toHex(sB);
            },_self.FPS);
        }
        else{  //foreColor
            _self.foreTimer = setInterval(function(){
                sR += stepR;
                sG += stepG;
                sB += stepB;
                sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR));
                sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG));
                sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB));
                if(sR == dR && sG == dG && sB == dB){
                    clearInterval(_self.foreTimer);
                }
                _self.obj.style.color = "#"+toHex(sR)+toHex(sG)+toHex(sB);
            },_self.FPS);
        }
    },
    fadeBgColor:function(destColor , duration){
        this.stopTimer(1);
        this.startTimer(destColor , duration ,1);
    },
    fadeForeColor:function(destColor , duration){
        this.stopTimer(0);
        this.startTimer(destColor , duration ,0);
    },
    stopTimer:function(flag){
        if(flag){
            clearInterval(this.bgTimer);
            this.bgTimer = null;
        }
        else{
            clearInterval(this.foreTimer);
            this.foreTimer = null;
        }
    },
    setFPS:function(fps){
        this.FPS = fps;
    }
};

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值