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

最新推荐文章于 2021-02-26 16:48:29 发布
最新推荐文章于 2021-02-26 16:48:29 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： Web/js 文章标签： function safari null xhtml firefox opera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/root_lee/article/details/5914020
版权

最近因为工作需要，得完成个背景色和前景色渐变动画效果。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;
    }
};

root_lee
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
emWin皮肤设置颜色
yuyimen952的博客
05-26 5576
emwin相对ucgui增加了类似WIN7的效果，但是有一个问题是使用了皮肤之后就不能设置颜色。这边我提供一种解决的方法，以button为例子。正常设置皮肤BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);后效果如下： 此时设置颜色并没有效果。 换成如下代码，/***************************定制皮肤*********************
Css fade()函数降低颜色变量透明度
qq_36904182的博客
12-16 3168
@primary-color颜色变量 background-color: fade(@primary-color, 20%);
【转】JavaScript 颜色渐变效果【修改版】
weixin_34217711的博客
01-07 85
代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt
code实现透明度渐变和颜色渐变的view
寻亚楠的专栏
06-14 1万+
最近用code写了些view上的渐变效果，使得app的UI特效不必全部依赖美工出的图片。 效果如下： 主要用到了Layer上的渐变层，核心代码如下，关于CALaer的使用可参考 //Transparent Gradient Layer - (void) insertTransparentGradient { UIColor *colorOne = [UIColor color
Android framework修改----关屏动画效果
ff313976的专栏
04-29 3327
Android5.0以后关屏采用了CRT电视特效，本身是蛮好的东西，但是由于项目需求，觉得关屏太慢了，需要修改速度 代码位置： services/core/java/com/android/server/display/DisplayPowerController.java 动画是通过mColorFadeOffAnimator来实现的  mColorFadeOffA
bootstrap设置某列背景色和前景色
07-12
在Bootstrap中，我们经常需要对列（column）进行定制，比如设置背景色和前景色，以实现更加个性化的布局效果。下面将详细介绍如何在Bootstrap中设置某列的背景色和前景色。 首先，了解Bootstrap的栅格系统。...
PS前景色背景色学习视频教程.mp4
09-24
PS前景色背景色
易语言置超级列表框指定行列前景、背景色模块
08-16
置超级列表框指定行列前景、背景色模块 系统结构:易语言置超级列表框指定行列前景、背景色模块源码,置超级列表框指定行列前景、背景色模块 ======窗口程序集1 | | | |------ __启动窗口
Android自定义View实现渐变色进度条
08-27
1. 分解效果图：对进度条的效果图进行分解，得到渐变色、圆头、灰底、进度值和弧形头部五个部分。 2. 确定比例关系：通过测量和计算，得到各部分的比例关系，包括视图总长、前面留空、进度长、文本占用和高度分配等...
pictures_background_color_change.zip_图形背景色修改
09-21
在IT领域，尤其是在图像处理和计算机视觉中，"pictures_background_color_change.zip_图形背景色修改"这个主题涉及到的关键知识点主要包括二值图像、图像背景色替换以及图像处理算法。以下是对这些概念的详细解释： ...
Java颜色互换_java – 如何慢慢地将对象颜色从一个变为...
weixin_29749887的博客
02-26 162
下面是一个示例,当您从一个组件移动到另一个组件时,它会淡化背景：import java.awt.*;import java.awt.event.*;import java.util.Hashtable;import java.util.ArrayList;import javax.swing.*;public class Fader{// background color when compon...
Android 9.0 自动背光机制分析
FightFightFight的博客
01-04 1万+
在android 9.0中，相比android 8.1而言，背光部分逻辑有较大的调整，这里就对android P背光机制进行完整的分析。 1.手动调节亮度 1.1.在SystemUI、Settings中手动调节 在界面(SystemUI)和Settings中拖动进度条调节亮度时，调节入口在BrightnessController中: @Override public void onChanged(...
Android7.0 PowerManagerService亮灭屏分析(二)
宇落 生命不息，奋斗不止......
01-13 9827
    在PowerManagerService中对各种状态进行判断后，将其数值封装进DisplayPowerRequest中传入DisplayPowerController中进一步处理。在亮屏过程中DisplayPowerController会根据传过来的数值来设置新的电源状态为亮屏，然后调用DisplayPowerState来对状态进行设置，在分析DisplayPowerState时会具体讲解...
Unity3D关于VR的Demo（一）
细心程度决定你的成败
07-27 1万+
最近有点忙，只有挤时间去了解VR这方面的Demo了，之前关注了一个Android平台的视频VR的demo研读的差不多了，现在开始关注Unity3d建造VR游戏环境的demo. Android下demo例子地址。 * https://github.com/ashqal/MD360Player4AndroidVR视频播放demo * https://github.com/ejeinc/
jQuery-效果-淡入淡出（fade系列）
飞翔的仙女杀手的博客
05-12 1012
在body标签中写入如下代码 <button id="in">fadeIn</button> <button id="out">fadeOut</button> <button id="toggle">fadeToggle</button> <button id="to...
透明色及渐变色设置
happygrillcx的专栏
12-29 1036
画窗体背景色 //渐变刷  LinearGradientBrush myBrush = new LinearGradientBrush(new Rectangle(0,0,this.Width,this.Height), Color.FromArgb(50, Color.Blue), Color.FromArgb(40, Color.Red), LinearGradientMode.Backw
CSS实现简单动态渐变闪烁效果
热门推荐
gundumw100的专栏
04-10 1万+
CSS练习用例： .event { border-radius:4px; -webkit-border-radius:4px; color:#FFFFFF; font-size:12px; margin:0px 30px; padding:2px 0px; } .event.received { background
Linux怎么改变背景色和前景色
最新发布
07-12
在Linux系统中，可以使用ANSI转义序列来改变终端的背景色和前景色。具体步骤如下： 1. 首先，使用以下转义序列将终端设置为支持ANSI转义序列： ```c system("echo -e '\033[?25h'"); ``` 2. 然后，使用以下转义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值