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，但是我只是在徘徊，如果这是一个更有效的方法使用数学？

我不想做任何动画/转换。

来源

2015-12-21 enguerranws

那么第一个问题是，你不能依靠浏览器来给你回颜色的方式，因为你设置它。将当前状态保持在独立于风格的地方会更可靠（更简单）。 – Pointy

为此，最好使用css3转换或动画。 – jcubic

@jcubic如何在转换/动画上“增加”鼠标悬停时的RGB值？ – enguerranws

要使用一个数学公式，有一些数字指示器的进度是有帮助的，例如从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％。

来源

2015-12-21 15:57:46 lex82

非常接近。由于对他的问题缺乏适用性的准确性，我避免发布类似的答案，但这基本上是必须要做的。作为一个方面的评论，我会使用“x”，“n”或“i”作为增量变量，因为传统数学现在是情境的背景 –

似乎是我在寻找的东西。我遇到了实现它的问题：http://codepen.io/enguerranws/pen/ZQOBwe正如你所看到的，进展总是从0开始，所以它的最大值是5（假设进度+ = 5）。 – enguerranws

确保将字符串正确转换为整数，反之亦然！在设置颜色之前，您需要R上的parseInt（）和G上的Math.floor（）。 – lex82

JS：从RGB蓝到红RGB

回答

相关问题