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);
            };
  • 相关阅读:
    Android Studio4.1.2中,修改了gradle后,如何在不关闭AS IDE的情况下使gradle进行sync
    Android-studio-ide-201.7042882-windows-4.1.2项目卡在Gradle: Download gradle-6.5-bin.zip
    Intellij IDEA开发环境中Springboot项目无Run ****main()的菜单
    《Bootstrap4Web设计与开发实战》源代码下载
    数字操作题目汇总
    机器学习模型跨平台上线
    koro1FileHeader 注释插件 vscode
    nginx https协议配置
    nginx 配置 不显示版本号
    Asp.Net Core 中的静态文件
  • 原文地址:https://www.cnblogs.com/fyima/p/3713111.html
Copyright © 2011-2022 走看看