zoukankan      html  css  js  c++  java
  • 发布一个带呼吸灯效果的函数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);
            };
  • 相关阅读:
    document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义
    Go -10 Go Web 简单实现
    Go -09 Go 函数和方法区别
    Go -08 Go win 环境搭建
    Go-07 Go 规范代码风格
    Go-06 Go 语言注释(comment)
    Go-05 Go 转义字符
    Go-04 Go 语法要求和注意事项
    Go-03 Go 快速入门
    Go-02 搭建 Go 开发环境(mac系统)
  • 原文地址:https://www.cnblogs.com/fyima/p/3713111.html
Copyright © 2011-2022 走看看