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


Posted in Javascript onOctober 01, 2013

下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用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'});
Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
浅谈js中的bind
Mar 18 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 #Javascript
javascript不可用的问题探究
Oct 01 #Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 #Javascript
js有序数组的连接问题
Oct 01 #Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 #Javascript
jquery配合css简单实现返回顶部效果
Sep 30 #Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 #Javascript
You might like
php ios推送(代码)
2013/07/01 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php中的比较运算符详解
2013/10/28 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
js数组操作常用方法
2014/05/08 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python 实现性别识别
2020/11/21 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
小区门卫工作职责
2013/12/14 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
男方婚前保证书
2015/02/28 职场文书
同学聚会通知短信
2015/04/20 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技