JS:从RGB蓝到红RGB
我想RGB颜色从蓝色(rgba(0,0,255)
)上JS mouseenter
转换为红色(rgba(255,0,0)
),逐步。JS:从RGB蓝到红RGB
因此,每次鼠标输入一个元素时,它都会“增加”它的背景颜色,从蓝色到绿色再到红色。
随着WIP现场演示:http://codepen.io/enguerranws/pen/ZQOBwe
这是我到目前为止已经完成:
function onGridDone(){
var gridders = document.querySelectorAll('.gridder');
for(var i = 0; i < gridders.length; i++){
gridders[i].addEventListener('mouseenter', onHover);
}
}
function onHover() {
var currentColor = this.style.backgroundColor,
currentColorArr = currentColor.replace(/[^\d,]/g, '').split(',');
R = currentColorArr[0],
G = currentColorArr[1],
B = currentColorArr[2];
console.log(R,G,B);
if(B > 0) B = B-10;
var indic = 255-B;
G = indic/2;
R = indic;
this.style.backgroundColor = "rgb("+R+","+G+","+B+")";
}
我已经试过许多东西,但基本上,我想我的颜色去从rgba(0,0,255)
,然后rgba(0,255,130)
,然后rgba(255,130,0)
,最后rgba(255,0,0)
(所以,从蓝色到绿色,然后从绿色到红色)。
我知道我可以做多个if/else语句来检查每个case,但是我只是在徘徊,如果这是一个更有效的方法使用数学?
我不想做任何动画/转换。
要使用一个数学公式,有一些数字指示器的进度是有帮助的,例如从0到255,然后从中计算颜色。
这不完全是你“基本”要求的,但它说明了我的意思:假设红色组件在此过程中将从0线性增加到255。然后,您可以查看现有字段的红色值,并立即知道您的位置。如果你想通过绿色移动,这应该是接近你想要做什么:
// assume r,g,b are the current values
var progress = r;
progress += 1; // of course you can increment faster
r = progress;
g = 255 - (255 * (Math.abs(progress-127)/128))
b = 255 - progress;
这样,您将无法通过颜色rgba(255,130,0)
在你的问题。不过,我认为它仍然可以解决您的问题。 r
线性增加,b
线性减少,g
先增加后减少50%。
非常接近。由于对他的问题缺乏适用性的准确性,我避免发布类似的答案,但这基本上是必须要做的。作为一个方面的评论,我会使用“x”,“n”或“i”作为增量变量,因为传统数学现在是情境的背景 –
似乎是我在寻找的东西。我遇到了实现它的问题:http://codepen.io/enguerranws/pen/ZQOBwe正如你所看到的,进展总是从0开始,所以它的最大值是5(假设进度+ = 5)。 – enguerranws
确保将字符串正确转换为整数,反之亦然!在设置颜色之前,您需要R上的parseInt()和G上的Math.floor()。 – lex82
那么第一个问题是,你不能依靠浏览器来给你回颜色的方式,因为你设置它。将当前状态保持在独立于风格的地方会更可靠(更简单)。 – Pointy
为此,最好使用css3转换或动画。 – jcubic
@jcubic如何在转换/动画上“增加”鼠标悬停时的RGB值? – enguerranws