<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#show{
width:200px;
height:200px;
}
</style>
<head>
<body>
<div id="show"></div>
<body>
<script type="text/javascript">
var int=self.setInterval("changeColor()",20);
$('#show').css('background-color','#'+Math.floor(Math.random()*16777215).toString(16));
function changeColor(){
var result = getRGB($('#show').css('background-color'));
if(result[2]<255){
result[2]=result[2]+1;
}else if(result[1]<255){
result[1]=result[1]+1;
}else if(result[0]<255){
result[0]=result[0]+1;
}
var newHex = result[0].toString(16)+result[1].toString(16)+result[2].toString(16);
$('#show').css('background-color','#'+newHex);
}
function getRGB(color) {
var result;
if ( color && color.constructor == Array && color.length == 3 )
return color;
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
return colors[jQuery.trim(color).toLowerCase()];
}
</script>
</html>
提取颜色的这个方法是网上搜到的一个animation的插件里面用到的，直接拿来主义了。
仅供娱乐，请勿乱踩，乱踩砍脚。
相关推荐
这是用soui实现的模仿最新版360界面颜色渐变的demo，给大家提供思路！
javascript实现网页背景颜色渐变
模仿微信底部导航
渐变动画的Demo，演示了渐变透明度，渐变尺寸收缩，画面转换移动，画面转换旋转等效果
使用Unity Shader使模型的颜色产生简单的两种颜色过渡的渐变效果。
一个超级简单的JS库，实现一个背景渐变与字体颜色阴影效果
js创建颜色渐变,js颜色渐变程序,firefox filter,ff filter处理 兼容FF和IE
Delphi7 及Delphi2010实现GDI+快速颜色渐变，里面附有D7和D2010版本的GDI.
vc编程实例5 颜色渐变进度条，菜鸟看看就行，做个菜鸟课设也是可以的
CSS实现背景颜色渐变，通过CSS滤镜使背景渐变，特殊情况下值得考虑的一个方案~
重写CProgressCtr进度条控件，实现进度条的颜色渐变特效，而且增加显示百分比的功能，用VC++实现，对广大MFC爱好者可能会有所帮助
VB 实现颜色渐变填充原代码，我用过的最好的渐变例子，希望大家喜欢
使用非常简单，这是一个实例工程 实际用的时候，先画在dialog里一个progress空间，然后给其生成一个变量，按照示例里德初始化就可以用了。
Unity NGUI 滑动列表渐变缩放，偏移，渐变 Demo 博客地址：https://blog.csdn.net/qq_30259857/article/details/79562652
易语言颜色随机渐变源码,颜色随机渐变,a渐变,b渐变,c渐变
BorderBrush 颜色渐变动画，错误代码与正确代码
Vue.js圆形CSS3颜色渐变色拾取器.zip
网页模板——Vue.js圆形CSS3颜色渐变色拾取器
简单PWM调光，RGB颜色渐变.利用51单片机定时器产生方波输出，通过改变占空比实现对RGB三种颜色的灯调光，混合出各种颜色
UIView的颜色渐变效果，一种颜色从透明度0到透明度1的渐变，以及多种颜色之间的渐变