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 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
理解JS事件循环
Jan 07 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
python实现windows下文件备份脚本
2018/05/27 Python
python三方库之requests的快速上手
2019/03/04 Python
python远程邮件控制电脑升级版
2019/05/23 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
医德医风演讲稿
2014/05/20 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
OpenCV-Python实现油画效果的实例
2021/06/08 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL