当前位置: 开发笔记 > 前端 > 正文

Javascript颜色渐变效果的实现代码

作者：c6643e7f36_253 | 来源：互联网 | 2022-01-26 11:07

在搭建博主博客的时候，寻思着做一些效果，看到菜单，就想是不是可以做一下颜色的渐变，增加一点动态的感觉。有个jquery的插件，效果相当不错，不过博主还是打算自立更生写一下，看看能不能实现

下面就是博主的一些思路和解决办法，如果对此没兴趣，想直接使用jquery插件的同学，可以点这里

思路

每一种颜色由RGB组成，每两位为一个16进制数
当前颜色代码和目标颜色代码，转换成10进制数后，是有差值的，利用差值，设定总执行次数的步长，计算每一步变更颜色的10进制数
利用定时器执行
简单的讲，就是将6位颜色代码以每两位转换为10进制数，然后计算两对RGB值的差，根据设定的步长（执行次数），计算每一步需要增加或减少的RGB值，最后变为目标颜色的RGB值

需要解决的问题

将6位颜色代码转换为10进制
根据步长计算每一步增加或减少数值
使用定时器执行这个增加或减少的过程
1、将6位颜色代码转换为10进制

关于16进制转为10进制，学校课本上就已经讲过了。个位*16的0次方，十位*16的1次方，以此类推。颜色是由RGB组成，每两位为一组，如：#123456，R=12，G=34，B=56，但实际上RGB值是10进制，所以，R=12只能说是对应的位置，12转为10进制：2*1+1*16=18，34：4*1+3*16=52，56：6*1+5*16=96，所以RGB=[18,52,96]。

这是数字的，但16进制还有A-F，所以还得先将A-F转为10-15，可以先用一个数组来保存整个16进制对应的数

代码如下:

var f=new Array();
f['0']=0;
f['1']=1;
f['2']=2;
f['3']=3;
f['4']=4;
f['5']=5;
f['6']=6;
f['7']=7;
f['8']=8;
f['9']=9;
f['A']=10;
f['B']=11;
f['C']=12;
f['D']=13;
f['E']=14;
f['F']=15;

因为颜色代码是不区分大小写的，所以可以先把颜色全部转换为大写

代码如下:

code=code.toLocaleUpperCase();//转换为大写
接着就是16进制转为10进制

//code即为6位颜色代码，如：f07786;
var r=f[code[0]]*16+f[code[1]];
var g=f[code[2]]*16+f[code[3]];
var b=f[code[4]]*16+f[code[5]];

整个转换的代码，写成一个方法

代码如下:

function colorConversion(code){
    var len=code.length;
    var f=new Array();
    f['0']=0;
    f['1']=1;
    f['2']=2;
    f['3']=3;
    f['4']=4;
    f['5']=5;
    f['6']=6;
    f['7']=7;
    f['8']=8;
    f['9']=9;
    f['A']=10;
    f['B']=11;
    f['C']=12;
    f['D']=13;
    f['E']=14;
    f['F']=15;
    code=code.toLocaleUpperCase();//转换为大写
    var s=code.substr(0,1);
    if(s=='#'){
        code=code.substr(1,6);
    }
    var r=f[code[0]]*16+f[code[1]];
    var g=f[code[2]]*16+f[code[3]];
    var b=f[code[4]]*16+f[code[5]];
    return [r,g,b];
}

代码中的s，是用来判断颜色代码是否带有#号，有就去掉，最后返回一个包含RGB值的数组

计算增加或减少的步长

比如，设定颜色变化次数为10次，那就需要计算这10次变化，每一次RGB值的增减数值是多少。利用当前颜色的RGB值和目标颜色的RGB的差取绝对值，然后除以10，可以得到一个步长，但这个值很可能是小数，可以把小数舍去，那么在最后一步增减数值的时候，直接变到目标颜色的RGB值就行了

代码如下:

var _step=10;
var _R_step=parseInt(Math.abs(_thisRGB[0]-_toRGB[0])/_step); //R的增减步长
var _G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/_step); //G的增减步长
var _B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step); //B的增减步长

每次执行增减

如果执行次数为10，也就是要连续的执行10次，当_step=1的时候，就算执行完成。那么在增减步长上，就会出现，如果_step=10，那么增减就是1倍步长，如果_step=9，也就是执行到第二步，那增减的就是2倍步长，一直到_step=1，增减9倍步长。这里可以使用这么一句简单的计算

代码如下:

var step=10;
var _step=step;
//循环体内
var s=(step-_step)+1;
_step--;

接着判断当前颜色RGB值和目标RGB的是增加还是减少

代码如下:

var r=_step==1?_toRGB[0]:(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0]+_R_step*s);
var g=_step==1?_toRGB[1]:(_thisRGB[1]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1]+_G_step*s);
var b=_step==1?_toRGB[2]:(_thisRGB[2]>_toRGB[2]?_thisRGB[2]-_B_step*s:_thisRGB[2]+_B_step*s);

最后，将颜色输出

代码如下:

obj.css({'background-color':'rgb('+r+','+g+','+b+')'});

这里输出的是rgb()的方式，没关系，和颜色代码同理，如果觉得还是输出6位代码，那就将10进制转成16进制就好了

最后就是用定时器来执行，中间还有对速度和计算，这里就不讲了。最后的执行代码：

代码如下:

/*
参数：
obj：目标对象
thisRGB：当前背景颜色的6位代码
toRGB：目标背景颜色的6位代码
thisColor：当前文字颜色的6位代码
toColor：目标文字颜色的6位代码
step：执行次数
speed：执行速度
*/
function colorGradient(obj,thisRGB,toRGB,thisColor,toColor,step,speed){
    var _thisRGB=colorConversion(thisRGB); //16进制转换10进制
    var _toRGB=colorConversion(toRGB);
    if(thisColor&&toColor){
        var _thisColor=colorConversion(thisColor,1);
        var _toColor=colorConversion(toColor,1);
    }

    var step=step?step:3;
    var _step=step;
    var _speed=speed?parseInt(speed/step):30; //根据总时间计算每次执行的速度
    var _R_step=parseInt(Math.abs(_thisRGB[0]-_toRGB[0])/_step);
    var _G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/_step);
    var _B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step);

这个方法很简单，但渐变的平滑度一般，特别是在一组对象连续执行的时候。只能说，这是一种很吊丝，很笨的方法，大神都是用Tween算法

jQuery颜色渐变插件
jquery.animate-colors-min.js

使用方法，直接使用jquery的animate就可以了，只是不用指定当前颜色，程序会自动取当前颜色，不过必须在样式里设定background

代码如下:

obj.animate({'background-color':'#ff0000','color':'#000000'});

推荐阅读

webkit
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
build
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
build
深入解析 MUI 开发中 plusReady 和 init 的区别

在使用 MUI 框架进行应用开发时，开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]

蜡笔小新 2024-12-26 15:57:00
js
根据条件动态控制文件选择文本的显示

本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本（如“未选择文件”）。通过结合CSS和JavaScript，可以实现更灵活的用户界面。 ... [详细]

蜡笔小新 2024-12-26 15:45:21
html
MATLAB实现n条线段交点计算

本文介绍了一种通过逐对比较线段来求解交点的简单算法。此外，还提到了一种基于排序的方法，但该方法较为复杂，尚未完全理解。文中详细描述了如何根据线段端点求交点，并判断交点是否在线段上。 ... [详细]

蜡笔小新 2024-12-26 14:48:56
html
高效解决应用崩溃问题！友盟新版错误分析工具全面升级

友盟推出的最新版错误分析工具，专为移动开发者设计，提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态，快速发现并修复错误，显著提升应用的稳定性和用户体验。 ... [详细]

蜡笔小新 2024-12-26 14:11:47
js
JavaScript 实战与基础案例解析

本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例，涵盖从入门到进阶的各个阶段，帮助读者全面提升JavaScript编程能力。 ... [详细]

蜡笔小新 2024-12-24 16:36:52
html
基于jQuery的用户注册页面表单验证代码分享

本文介绍了一段使用jQuery实现的用户注册页面表单验证代码，适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript，确保用户输入的数据格式正确。 ... [详细]

蜡笔小新 2024-12-24 14:37:46
html
线性Kalman滤波器在多自由度车辆悬架主动控制中的应用研究

本文探讨了线性Kalman滤波器（LKF）在不同自由度（2、4、7）的车辆悬架系统中进行主动控制的应用。通过详细的仿真分析，展示了LKF在提升悬架性能方面的潜力，并总结了调参过程中的关键要点。 ... [详细]

蜡笔小新 2024-12-27 20:47:55
build
C++实现经典排序算法

本文详细介绍了七种经典的排序算法及其性能分析。每种算法的平均、最坏和最好情况的时间复杂度、辅助空间需求以及稳定性都被列出，帮助读者全面了解这些排序方法的特点。 ... [详细]

蜡笔小新 2024-12-27 19:25:14
build
使用动态规划算法求解0-1背包问题

本文介绍如何利用动态规划算法解决经典的0-1背包问题。通过具体实例和代码实现，详细解释了在给定容量的背包中选择若干物品以最大化总价值的过程。 ... [详细]

蜡笔小新 2024-12-27 19:17:15
build
深入理解设计模式与七大原则

本文详细探讨了Java中的24种设计模式及其应用，并介绍了七大面向对象设计原则。通过创建型、结构型和行为型模式的分类，帮助开发者更好地理解和应用这些模式，提升代码质量和可维护性。 ... [详细]

蜡笔小新 2024-12-27 19:10:10
html
Java并发编程：LinkedBlockingQueue的实际应用

本文介绍了Java并发库中的阻塞队列（BlockingQueue）及其典型应用场景。通过具体实例，展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递，并结合线程池和原子类优化性能。 ... [详细]

蜡笔小新 2024-12-27 18:51:49
html
深入浅出：Google工程师的算法学习指南

通过Google工程师的专业视角，带你系统掌握算法的核心概念与实践技巧。 ... [详细]

蜡笔小新 2024-12-26 16:49:25
html
C++ 中的数组与动态数组初始化

本文探讨了 C++ 中普通数组和标准库类型 vector 的初始化方法。普通数组具有固定长度，而 vector 是一种可扩展的容器，允许动态调整大小。文章详细介绍了不同初始化方式及其应用场景，并提供了代码示例以加深理解。 ... [详细]

蜡笔小新 2024-12-26 15:38:03

c6643e7f36_253

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章