<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 颜色渐变进度条,菜鸟看看就行,做个菜鸟课设也是可以的
简单PWM调光,RGB颜色渐变.利用51单片机定时器产生方波输出,通过改变占空比实现对RGB三种颜色的灯调光,混合出各种颜色
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颜色渐变色拾取器
UIView的颜色渐变效果,一种颜色从透明度0到透明度1的渐变,以及多种颜色之间的渐变