JS实现的颜色实时渐变效果完整实例
本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div>
<span id="span1"></span>
<script type="text/javascript">
var begin = getRGB('#33FFAA');
var end = getRGB('#FF0000');
var curColor = getRGB('#33FFAA');
var bo = true;
var rate = getRate(begin, end);
function blink()
{
window.setInterval(function(){
curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r);
curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g);
curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b);
document.getElementById('div1').style.color = getColor(curColor);
document.getElementById('span1').innerHTML = getColor(curColor);
if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)
{
bo = true;
}
if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)
{
bo = false;
}
} , 100);
}
function getCur(beginValue, endValue, curValue, bo, rateValue)
{
if(beginValue == endValue)
{
return beginValue;
}
rateValue = beginValue < endValue ? rateValue : -rateValue;
curValue += bo ? rateValue : -rateValue;
if(curValue < Math.min(beginValue, endValue))
{
curValue = Math.min(beginValue, endValue);
}
if(curValue > Math.max(beginValue, endValue))
{
curValue = Math.max(beginValue, endValue);
}
return curValue;
}
function getRate(b, e)
{
var obj = new Object();
obj.r = Math.abs(b.r - e.r) / 5;
obj.g = Math.abs(b.g - e.g) / 5;
obj.b = Math.abs(b.b - e.b) / 5;
return obj;
}
function getRGB(color)
{
var obj = new Object();
obj.r = parseInt(color.substr(1,2), 16);
obj.g = parseInt(color.substr(3,2), 16);
obj.b = parseInt(color.substr(5,2), 16);
return obj;
}
function getColor(obj)
{
obj.r = Math.round(obj.r);
obj.g = Math.round(obj.g);
obj.b = Math.round(obj.b);
var color = '#';
color += (obj.r < 16 ? '0':'') + obj.r.toString(16);
color += (obj.g < 16 ? '0':'') + obj.g.toString(16);
color += (obj.b < 16 ? '0':'') + obj.b.toString(16);
return color;
}
blink();
</script>
</body>
</html>
PS：这里再为大家推荐几款本站的相关在线工具：
在线RGB、HEX颜色代码生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools.jb51.net/color/jPicker
在线网页调色板工具：
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表：
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
Javascript 颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里 思路 每一种颜色由RGB组成,每两位为一个16进制数当前颜色代码和目标颜色代码,转换成10进制数后,是有差值的,利用差值,设定总执行次数的步长,计算每一步变更颜色的10进制数利用定时器执行简单的讲,就是将6位颜色代码以每两位转换为10进制数,然后计算两对RGB值的差,根据设定的步长(执行次数),计算每一步需要增加或减少的RGB值,最后变为目标颜色的RGB值 需要解决的问题 将6位颜色代码转换为10进制
-
js实现颜色阶梯渐变效果（Gradient算法）
html中颜色可以使用rgb和hex方式来表示. 在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的梯级渐变算法. 其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0). 其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600).因此我们可以将16进制转换为rgb单个进行梯级
-
利用递增的数字返回循环渐变的颜色的js代码
函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"
-
JavaScript 颜色梯度和渐变效果第1/3页
程序说明 [ColorGrads颜色梯度] 程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合. 颜色都可以用红(r).绿(g).蓝(b)三个颜色来表示. 程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r).绿(g).蓝(b)三个颜色值作元素的集合. 那就首先要知道有什么颜色表示形式,从w3c的Colors部分可以知道有以下形式: 关键词模式: em { color: red } RGB颜色模式: em { color: #f00 } e
-
js实现按钮颜色渐变动画效果
本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&
-
js+HTML5实现canvas多种颜色渐变效果的方法
本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not s
-
JS Tween 颜色渐变
有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par
-
神奇！js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
javascript实现颜色渐变的方法
渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变.形状.大小.位置.方向.色彩等视觉因素都可以进行渐变.在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的渐变算法. 已知:A=50,B=200,A.B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少. 公式:Gradient = A + (B-A) / Step * N 注]编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了
-
漂亮! js实现颜色渐变效果
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src