js颜色渐变，算法原理

最新推荐文章于 2022-01-11 09:08:47 发布

baibaibeaytiful

最新推荐文章于 2022-01-11 09:08:47 发布

阅读量2.3k

点赞数

分类专栏： web前端 javascript web前端 javascript 算法遍历文章标签： javascript 算法函数颜色

本文链接：https://blog.csdn.net/wzdlovewen/article/details/52262328

版权

web前端 javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

web前端 javascript 算法遍历

6 篇文章 0 订阅

订阅专栏

颜色是web呈现的视觉效果很重的要一块，也是用户体验的很重要的一方面。

我们在元素变大变小的操作中已经感受到渐变效果的舒爽，如果我们想实现颜色的渐变，那是否也可行。我们在改变div大小的时候或者透明度的时候常用的是jq里面的运动函数，animate。我们尝试使用animate改动态改变颜色。发现是不可行的。。。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#color{ height:500px; width:500px; background-color:#C99;}
</style>
<title>无标题文档</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$('#color').on('click',function(){
	$(this).animate({'background-color':'#fff'},1000);
	});
})
</script>
</head>

<body>
<div id='color'></div>
</body>
</html>

测试代码，绑定点击事件，触发运动，结果是不可行的

所以我们尝试去看看元素的color值到底是什么？

console.log($('#color').css('background-color'));

那么我们得到是

rgb(204, 153, 153)

一切能得到值的，都是可以处理的，我们要告诉自己这么个道理。

那么我们附上颜色数值的时候是16进制的，所以，我们要转成10进制的计算，那么rgb也是10进制的，不过是个字符串，所以我们如何去统一化呢，我是将其放在一个数组里面，然后便于我们计算，最后赋予颜色的时候再拼接一下数值就ok了。

function deepjs(color){
				//将十六进制变成十进制
function mathswitch(num){
		if(num=='a' || num=='A' )
		{num=10;}
		else if(num=='b' || num=='B' )
		{num=11;}
		else if(num=='c' || num=='C' )
		{num=12;}
		else if(num=='d' || num=='D' )
		{num=13;}
		else if(num=='e' || num=='E' )
		{num=14;}
		else if(num=='f' || num=='F' )
		{num=15;}
		else{num=parseInt(num);}
		return num;
	}
	
	color=String(color);
	var reg1=/#/i;
	var reg2=/[rgb]/i;
	var reg3=/\w/gi
	var reg4=/[0-9]+/gi;
	var rgba,rgbb,rgbc;
	if(color.search(reg1)!=-1){
	var arry=color.match(reg3);
		if(arry.length==3){
			rgba=mathswitch(arry[0]);	
			rgbb=mathswitch(arry[1]);	
			rgbc=mathswitch(arry[2]);	
			}
		else if(arry.length==6){
			rgba=mathswitch(arry[0])*16+mathswitch(arry[1]);
			rgbb=mathswitch(arry[2])*16+mathswitch(arry[3]);
			rgbc=mathswitch(arry[4])*16+mathswitch(arry[5]);
			}
		arry[0]=rgba;
		arry[1]=rgbb;
		arry[2]=rgbc;	
	}
	else if(color.search(reg2)!=-1){
		//拆分color
		var arry=color.match(reg4);
		arry[0]=parseInt(arry[0]);
		arry[1]=parseInt(arry[1]);
		arry[2]=parseInt(arry[2]);
		}
	else{return;}
	return arry;
	}

那么这个就是如何转化数值的计算，这个返回的是一个数组，因为color赋值的时候是接受rgb这样格式的，那么我们没有必要再去将rgb变成16进制的元素了，变成数组之后就很好去计算了，渐变效果就是定时器不断的计算赋值，剩下的就没什么好说的了。个人做法，不喜勿喷。

baibaibeaytiful

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js颜色渐变，算法原理

颜色是web呈现的视觉效果很重的要一块，也是用户体验的很重要的一方面。我们在元素变大变小的操作中已经感受到渐变效果的舒爽，如果我们想实现颜色的渐变，那是否也可行。我们在改变div大小的时候或者透明度的时候常用的是jq里面的运动函数，animate。我们尝试使用animate改动态改变颜色。发现是不可行的。。。。#color{ height:500px; width:500px;
复制链接

扫一扫