您的位置：首页 > Web前端 > JavaScript

js颜色渐变，算法原理

2016-08-20 17:03 295 查看

颜色是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进制的元素了，变成数组之后就很好去计算了，渐变效果就是定时器不断的计算赋值，剩下的就没什么好说的了。个人做法，不喜勿喷。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航