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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
7个jQuery最佳实践
Jan 12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
中英文字符串翻转函数
2008/12/09 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
JavaScript实现切换多张图片
2021/01/27 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
法律顾问服务方案
2014/05/15 职场文书
学生党员公开承诺书
2014/05/28 职场文书
物业管理专业自荐信
2014/07/01 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS