js颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用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'});
相关文章
Illustrator渐变网格工具绘制可爱的卡通小猪教程分享
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说渐变网格工具绘制可爱的卡通小猪的教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一...2016-09-14- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- PS或者AE中我们在使用渐变工具时,会发现渐变的过渡不均匀,出现明显的波纹,也就是色带(色阶),怎么能很好地优化这个问题呢?(之所以说优化,因为此问题不可能完全解决,只能说能让色...2017-01-22
- 这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28
- 说起“渐变色”,你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变。 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在...2014-05-31
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说下制作渐变头像效果的教程,各位想知道到底该怎么制作渐变头像的,那么下面就快来跟着小编一起看一看吧。 ...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来详细的说一下给图像填充彩色渐变的教程,各位想知道具体方法的使用者们,那么下面就快来跟着小编一起看看教程...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下渐变网格绘制人像的教程,各位想知道具体方法的使用者们,那么下面就快来跟着小编一起看一看吧。 ...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说调出渐变颜色的具体方法,各位想知道具体方法的使用者,那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14
CSS3,线性渐变(linear-gradient)的使用总结
这篇文章介绍了CSS3,线性渐变(linear-gradient)的使用总结,对此感兴趣的同学可以参考一下本文,写得很详细 《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 tex...2017-01-22利用photoshop利用图层样式及渐变制作个性的条纹金属字
利用photoshop利用图层样式及渐变制作个性的条纹金属字,作者制作的时候也非常细心,在使用外发光及内方法的时候用了一些有层次的金属渐变,这样做出的质感非常细腻...2016-09-14- 今天小编在这里就来给photoshop的这一款软件的使用者们来说下利用剪切蒙版做渐变字的制作教程,各位想知道具体制作方法的,那么下面就来一起看下教程吧。 给各位pho...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说利用渐变映射快速调出欧美色后期处理的教程,各位想知道具体处理方法的使用者们,那么各位就快来跟着...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说下制作信息图表及渐变网格的教程,各位想知道具体制作方法的使用者,那么下面就快来跟着小编一起看一看吧。...2016-09-14
- PS怎么画出一个环形渐变呢?今天小编就为大家介绍如何用PS画出一个环形渐变。教程很简单,主要是针对初学者,感兴趣的朋友可以继续关注我们一聚教程网。 一、画图1、打...2017-01-22
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一下设计渐变网格工具绘制漂亮郁金香的教程,各位想知道具体绘制方法的使用者们,那么下面就快来跟着小编一起...2016-09-14
- 方法一:用图实现1切一张1*760的渐变背景图2在dw中添加做背景方法二:用css实现,代码如下:<html><body style="FILTER: progid:DXImageTransform.Microsoft.Gradi...2016-09-20
- 光盘背面光干涉现象产生的彩色图案很漂亮。photoshop这款实用的软件可以轻松做出光盘背面图案,有兴趣的同学快尝试一下吧 在PS中可以利用角度渐变完成光盘制作,操作...2016-12-15
- 这篇文章主要介绍了C# 实现颜色渐变窗体控件详细讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-15
- 渐变效果在css中我们必须使用js来配合实现了现在我们可以直接使用css来实现渐变效果了,下面我们来看一篇css3中渐变效果实现示例吧。 渐变效果是backround-image属...2016-10-02