JS实现颜色动态淡化效果

2024-09-26 19:43:40

效果图：

代码如下：

<html>
<head>
<title>颜色变换</title>
<style type="text/css">
div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;}
input{position:absolute;left:100px;top:100px;}
</style>
</head>
<body>
<input type="button" value="点击执行颜色淡化效果"/>
<script type="text/javascript">
var a=255,b=165,c=0,w=100,box;
function cont()
{
a=255;
b=165;
c=0;
w=100;
box = document.createElement('div');
document.body.appendChild(box);
}
function changeColor()
{
document.getElementsByTagName('input')[0].disabled="disabled";
box.style.backgroundColor="RGB("+a+","+b+","+c+")";
box.style.width=w;
box.style.height=w;
c++;
if(c>=166)b++;
w++;
if(a>=255&&b>255&&c>255)
{
box.parentNode.removeChild(box);
document.getElementsByTagName('input')[0].removeAttribute('disabled');
return false;
}
setTimeout(changeColor,1);
}
document.getElementsByTagName('input')[0].onclick=function()
{
cont();
changeColor();
}
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

Javascript 颜色渐变效果的实现代码

下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里思路每一种颜色由RGB组成,每两位为一个16进制数当前颜色代码和目标颜色代码,转换成10进制数后,是有差值的,利用差值,设定总执行次数的步长,计算每一步变更颜色的10进制数利用定时器执行简单的讲,就是将6位颜色代码以每两位转换为10进制数,然后计算两对RGB值的差,根据设定的步长(执行次数),计算每一步需要增加或减少的RGB值,最后变为目标颜色的RGB值需要解决的问题将6位颜色代码转换为10进制
神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下下面是 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
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
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
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>按钮慢慢变色&
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
利用递增的数字返回循环渐变的颜色的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"
JS Tween 颜色渐变

有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par

JS实现颜色动态淡化效果

相关推荐

随机推荐