如何自動計算導航項目背景顏色

Question

可以說我有一個導航菜單。並在該菜單中，鏈接到頁面（令人震驚的權利）。我希望每個鏈接的背景顏色不同，但通過兩個定義的顏色之間的百分比設置。

例如，可以說我選擇＃000和#fff作爲我的顏色。我想通過SASS說第一個項目的背景顏色總是＃000，最後一個項目的背景顏色總是#fff。但是，根據導航菜單中的項目數量，百分比將被拉出，並且相應的顏色停止將用於「之間」項目背景。

下面是一個例證，以防萬一我失去了任何人：

第一色階代表4個菜單項。每個項目的位置從100％平分，併產生一個由此產生的顏色停止。該數字成爲該項目的背景。

第二個顏色漸變表示5個菜單項。其他一切都適用，但現在已經爲5件物品進行了計算。

我給這家使用自帶不想手動鍵入噸：第n個孩子選擇。如果他們添加/刪除項目，那麼：第n個顏色規則不再適用。如何用css和jQuery做到這一點？

Answer 1

首先，我認爲最好用Javascript實現而不是通過CSS或SASS。我不太熟悉SASS的所有功能，但我的理解是SASS在運行時編譯爲CSS，因此您無法動態更新頁面上的列表。

使用JavaScript，您將可以動態地添加或刪除列表中的項目並更新顏色。

好的，該怎麼做。 首先，將值存儲爲rgb顏色，而不是十六進制。所以在你上面的例子中，你將存儲0,0,0爲黑色，255,255,255爲白色。

然後，當您渲染頁面時，找到中間值就像計算您擁有的元素數量一樣簡單 - 即您需要的步驟數量，並將每個值對之間的距離，開始和結束r，g ，和b。

使用background-color：rgba（x，x，x，1）設置你的背景顏色，你應該很好走。

下面是一些快速和骯髒的JavaScript代碼，將計算

var startingRGB = [0,0,0]; 
var endingRGB = [255, 255, 255]; 
var steps = 5; 

var eachStep = [ 
    (endingRGB[0] - startingRGB[0])/(steps-1), 
    (endingRGB[1] - startingRGB[1])/(steps-1), 
    (endingRGB[2] - startingRGB[2])/(steps-1) 
]; 

var backgrounds = []; 

for(var i = 0; i < steps; i++){ 
    backgrounds.push([ 
     Math.abs(startingRGB[0] + (eachStep[0] * i)), 
     Math.abs(startingRGB[1] + (eachStep[1] * i)), 
     Math.abs(startingRGB[2] + (eachStep[2] * i)) 
    ]); 
} 

你運行這個和背景將具有RGB值的每一步一個數組的步驟。

[0,0,0], [63.75,63.75,63.75], [127.5,127.5,127.5], [191.25,191.25,191.25],  
[255,255,255] 

Answer 2

好吧，這裏是我的嘗試，我會盡量註釋代碼儘可能：d 讓我們假設你有4個格在HTML：

<div data-color-start=#000" data-color-end="#fff" id="wrapper"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

那麼我們就需要jQuery的代碼計算的div的數量，計算，然後將被添加到我們的div的背景顏色：

（你在潛水前，這可以優化）

// returns an array (so we can use easily in getColors) 
function parseHex(hexCode) { 
    var returned; 
    if(hexCode.length === '4') { 
     returned[0] = parseInt(hexCode[1], 16); // transforsm in a normal number, lie you would use in rgb() 
     returned[1] = parseInt(hexCode[2], 16); 
     returned[2] = parseInt(hexCode[3], 16); 
    } 
    else { 
     //i suppose this is the case like #
     returned[0] = parseInt(hexCode.substring(1,3), 16); //same thing like above but we substring'ed the hexCode 
     returned[1] = parseInt(hexCode.substring(3,5), 16); 
     returned[2] = parseInt(hexCode.substring(5), 16); 
    } 

    return returned; // so we return the array 
} 


// gets the colors based on the parameters, returns array 
function getColors(startColor, endColor, number) { 
    var startArr = parseHex(startColor); 
    var endArr = parseHex(endColor); 
    var ratioOne, ratioTwo, ratioThree; 
    var i=0; 
    var colors; // the returned array 
    var temp; //used as temporary variable in for loop 
    var one, two, three; // this will store bool values 
    // let's say we have rgb(100,0,20) to rgb(10,200,10) 
    // we have for RED to decrease the value of our gradient 
    // for GREEN to increase it 
    // for BLUE to decrease it 
    one = startArr[0] < endArr[0]; //so true if we have to increase it 
    two = startArr[1] < endArr[1]; 
    three = startArr[2] < endArr[2]; 

    // now basically we will find the ratio of each R, G, B, and make the gradient based on it 
    ratioOne = Math.floor((Math.abs((startArr[0] - endArr[0]))+1)/(number-1)); 
    ratioTwo = Math.floor((Math.abs((startArr[1] - endArr[1]))+1)/(number-1)); 
    ratioThree = Math.floor((Math.abs((startArr[2] - endArr[2]))+1)/(number-1)); 

    // store the first gradient 
    colors[0] = 'rgba(' + startArr[0] + ',' + startArr[1] + ',' + startArr[2] + ')'; 
    for(i=1; i<(number-1); i+=1) { 
     colors[i] = 'rgba('; 
     if(one) { 
      temp = startArr[0] + ratioOne*i; 
     } 
     else { 
      temp = startArr[0] - ratioOne*i; 
     } 
     colors[i] += temp; 
     colors[i] += ','; 

     if(two) { 
      temp = startArr[1] + ratioTwo*i; 
     } 
     else { 
      temp = startArr[1] - ratioTwo*i; 
     } 
     // we modify the temp variable each time, so this is not a problem 
     colors[i] += temp; 
     colors[i] += ','; 

     if(three) { 
      temp = startArr[2] + ratioThree*i; 
     } 
     else { 
      temp = startArr[2] - ratioThree*i; 
     } 
     colors[i] += temp; 
     colors[i] += ')'; 
    } 

    // i will be just one more than the i which our for loop ended 
    colors[i] = 'rgba(' + endArr[0] + ',' + endArr[1] + ',' + endArr[2] + ')'; 

    return colors; // we now have all the colors from our gradient 
} 

var wrapper = $('#wrapper'); // store this, will be used later 
var startColor = wrapper.data('color-start'); // remember the HTML ? 
var endColor = wrapper.data('color-end'); 
var elements = wrapper.find('.child'); // now store the links from the header 
var elLength = elements.length; // get the number of links in the menu 

var colors = getColors(startColor, endColor, elLength); 

for(var i=0; i<elLength; i+=1) { 
    elements[i].style('background-color', colors[i]); 
} 

因此，您在html中存儲第一種顏色和最後一種顏色，然後js代碼將內聯樣式添加到每個鏈接/ div /無論背景顏色（通過rgb顏色）。你向我們展示的梯度是通過數學函數完成的（例如f（x）= x;或者像這樣的smth）。這就是爲什麼你可以用ratioOne，ratioTwo和ratioThree

我希望我沒有犯任何錯誤，並希望你能明白這個想法。正如你已經知道的，這不能通過SASS完成，只有JS（因爲你想寫更少的代碼，呃？）