<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能执行的...
【颜色渐变的柱状图】是一种数据可视化工具，它以柱子的高度或长度来表示数值，同时在颜色上采用渐变效果，以增强视觉吸引力并突出数据的变化趋势。这种图表在信息技术领域广泛用于数据分析、报告展示和业务决策中，...
在案例2－颜色渐变直线中，可能包含了一个MFC对话框工程，其中定义了一个自定义控件类，重写了`OnPaint()`函数来实现颜色渐变直线的绘制。代码中会展示如何将上述步骤具体实现，包括如何在MFC的C++类中组织这些绘图...
在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. **角度渐变**：与线性...
在“立方体颜色渐变”这个主题中，我们将探讨如何使用OpenGL来实现一个立方体表面的颜色逐渐变化效果，同时也会涉及立方体的动态消隐技术。 首先，我们要理解颜色渐变的概念。在计算机图形学中，颜色渐变指的是颜色...