首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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);

    var timer=setInterval(function(){
        if(_step>0){
            var s=(step-_step)+1;
            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+')'});
            if(thisColor&&toColor){
                var cr=_step==1?_toColor[0]:(_thisColor[0]>_toColor[0]?_thisColor[0]-_R_step*s:_thisColor[0]+_R_step*s);
                var cg=_step==1?_toColor[1]:(_thisColor[1]>_toColor[1]?_thisColor[1]-_G_step*s:_thisColor[1]+_G_step*s);
                var cb=_step==1?_toColor[2]:(_thisColor[2]>_toColor[2]?_thisColor[2]-_B_step*s:_thisColor[2]+_B_step*s);
                obj.css({'color':'rgb('+cr+','+cg+','+cb+')'});
            }
            _step--;
        }else{
            clearInterval(timer);
            return true;
        }
    },_speed);
}

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

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

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

代码如下:

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


推荐阅读
  • bootstrap

    前端人员必须知道的三个问题及其发展阶段

    本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]
  • html

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • ajax

    Java实战之电影在线观看系统的实现

    Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • html

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • bootstrap

    高校天文共享平台开发过程中的思考与规划

    本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]
  • html

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • html

    动态规划算法的基本步骤及最长递增子序列问题详解

    动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
  • html

    解决IE678伪类不兼容问题的方法

    本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • html

    Html5-Canvas实现简易的抽奖转盘效果

    Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]
  • html

    单击时动态创建
  • 元素 - Dynamically create
  • element on click

    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • bootstrap

    HTML5网页模板怎么加百度统计？

    HTML5网页模板怎么加百度统计？
    本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • html

    Android实战——jsoup实现网络爬虫，糗事百科项目的起步

    Android实战——jsoup实现网络爬虫，糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • html

    大数据就业前景及人才需求

    近年来，大数据成为互联网世界的新宠儿，被列入阿里巴巴、谷歌等公司的战略规划中，也在政府报告中频繁提及。据《大数据人才报告》显示，目前全国大数据人才仅46万，未来3-5年将出现高达150万的人才缺口。根据领英报告，数据剖析人才供应指数最低，且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示，未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中，60%以上的招聘职位都是针对大数据人才的。 ... [详细]
  • console

    C#生成随机数的三种方法及其问题分析

    本文介绍了C#中生成随机数的三种方法，并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法，但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数，进一步突显了这个问题。文章指出，随机数生成在任何编程语言中都是必备的功能，但Random类生成的随机数并不可靠。最后，提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • console

    qt学习(六)数据库注册用户的实现方法

    qt学习(六)数据库注册用户的实现方法
    本文介绍了在qt学习中实现数据库注册用户的方法，包括登录按钮按下后出现注册页面、账号可用性判断、密码格式判断、邮箱格式判断等步骤。具体实现过程包括UI设计、数据库的创建和各个模块调用数据内容。 ... [详细]
author-avatar
c6643e7f36_253
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有