源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-06-20 04:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript 颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里 [b]思路[/b] 每一种颜色由RGB组成,每两位为一个16进制数 当前颜色代码和目标颜色代码,转换成10进制数后,是有差值的,利用差值,设定总执行次数的步长,计算每一步变更颜色的10进制数 利用定时器执行 简单的讲,就是将6位颜色代码以每两位转换为10进制数,然后计算两对RGB值的差,根据设定的步长(执行次数),计算每一步需要增加或减少的RGB值,最后变为目标颜色的RGB值 [b]需要解决的问题[/b] 将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进制对应的数
[url=http://demo.jb51.net/jslib/jquery.animate-colors-min.js]jquery.animate-colors-min.js[/url] 使用方法,直接使用jquery的animate就可以了,只是不用指定当前颜色,程序会自动取当前颜色,不过必须在样式里设定background
[u]复制代码[/u] 代码如下:
obj.animate({'background-color':'#ff0000','color':'#000000'});
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部