<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的插件里面用到的，直接拿来主义了。
仅供娱乐，请勿乱踩，乱踩砍脚。
相关推荐
总结来说，"360绿黄红颜色渐变Demo"是一个利用Soui框架实现的颜色渐变示例，它展示了如何在Windows应用中创建平滑的颜色过渡效果。对于想要在自己的项目中实现类似效果的开发者，这个Demo提供了宝贵的参考和灵感。...
通过这个"微信底部导航颜色渐变demo"项目，开发者可以学习到如何实现一个与微信类似的功能，并将其应用到自己的移动应用中，提升用户体验。文件名"WeiXin201-0505"可能是项目版本号或日期，具体代码实现和细节将包含...
描述中的“按照示例里的初始化就可以用”意味着有一个初始化过程，这通常包括设置进度条的基本属性，如颜色、大小、样式等，以及渐变的颜色范围和方向。 标签“vc 进度条空间”暗示这是使用Microsoft Visual C++...
javascript实现网页背景颜色渐变
在Delphi 7和Delphi 2010中，我们可以创建一个GDI+的Graphics对象，然后利用GradientBrush来填充一个矩形或任何形状，以展示颜色渐变。以下是一段简单的示例代码，演示如何创建一个线性颜色渐变： ```delphi uses ...
【颜色渐变的柱状图】是一种数据可视化工具，它以柱子的高度或长度来表示数值，同时在颜色上采用渐变效果，以增强视觉吸引力并突出数据的变化趋势。这种图表在信息技术领域广泛用于数据分析、报告展示和业务决策中，...
在创建颜色渐变效果时，我们可能需要自定义这个着色器，或者创建一个新的Shader。 1. **Shader基础知识**： - **CG Shader语言**：Unity支持基于Cg的Shader编程，Cg是一种高级着色语言，可以被编译为GPU能执行的...
在MFC中，可以使用CreateGradientBrush函数创建一个渐变刷，然后用这个刷子填充矩形区域，实现从进度条的一端到另一端的颜色变化。 2. **径向渐变**：这种渐变方式是从一个中心点向外扩散，颜色由内至外逐渐变化。...
`Faded_v1-0.js`是一个实例，展示了如何利用JavaScript来弥补CSS3在旧版浏览器中的不足，实现跨浏览器的颜色渐变效果。通过深入理解这个库的工作原理和用法，你可以进一步提升你的前端开发技能。
【标题】：创建一个简单的JS库来实现背景渐变与文字阴影效果 在网页设计中，视觉效果常常是吸引用户注意力的关键因素。本项目提供了一个轻量级的JavaScript库，旨在帮助开发者轻松实现背景渐变和文字阴影效果，从而...
本示例项目“Android渐变圆环Demo”聚焦于如何实现一个具有动画效果的渐变色圆环。这个圆环不仅展示了色彩的平滑过渡，还添加了动态效果，提升了用户体验。 首先，我们要理解自定义View的基本概念。在Android中，...
例如，设置一个从红色到蓝色的渐变： ```javascript var elem = document.getElementById('myElement'); elem.style.background = 'linear-gradient(to right, red, blue)'; ``` 2. **动态颜色渐变** 要实现...
在实际开发中，理解并掌握Vue.js的组件系统、响应式数据绑定、指令和事件处理机制，以及CSS3的渐变语法，都是实现这样一个颜色拾取器的关键。通过研究和实践这个组件，开发者可以提升自己在前端开发领域，特别是Vue....
你可以创建一个画布，然后在画布上用随机渐变的颜色绘制图形。 6. **源码结构**：易语言的源码通常包括`程序头`、`变量声明`、`过程定义`和`主程序`等部分。在"易语言颜色随机渐变源码"中，可能包含初始化颜色、...
3. **颜色站**：除了起始和结束颜色，还可以通过设置颜色站（ColorStop）来定义多个中间颜色，每个颜色站都有一个位置值，表示在渐变中的位置。可以使用`LinearGradientBrush.SetColorStop()`方法来设置颜色站。 4....
总的来说，`jquery.color.js`是jQuery生态系统中的一个重要组成部分，它扩展了jQuery的动画功能，使得开发者能够更自由地操控元素的颜色变化，从而创造出更加吸引人的视觉效果。对于那些希望在不牺牲兼容性的前提下...
本文将深入探讨如何创建一个圆形颜色渐变的进度条自定义控件。这个控件能够以动态的、平滑的方式显示进度，并且颜色随着进度的增加而渐变，为用户呈现出更加丰富的视觉效果。 首先，我们需要创建一个新的`View`类来...
2. **径向渐变**：与线性渐变不同，颜色是从一个中心点向外扩散，形成一个圆或椭圆形状的渐变效果。在计算机图形学中，这需要计算每个像素离中心点的距离，然后根据距离分配相应的颜色值。 3. **角度渐变**：与线性...
在51单片机中实现RGB颜色渐变，需要编写程序来控制三个定时器或使用一个定时器控制三个输出引脚，通过改变每个颜色的占空比来实现颜色的平滑过渡。程序设计时，可以设定一个时间间隔，在这个间隔内线性或非线性地...
在“立方体颜色渐变”这个主题中，我们将探讨如何使用OpenGL来实现一个立方体表面的颜色逐渐变化效果，同时也会涉及立方体的动态消隐技术。 首先，我们要理解颜色渐变的概念。在计算机图形学中，颜色渐变指的是颜色...