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


下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用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进制对应的数

jquery.animate-colors-min.js

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

复制代码 代码如下:

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


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3