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

回答

相關問題