jquery - 如何为导航元素提供自动计算的背景颜色

Question

假设我有一个导航菜单。在该菜单中，有页面链接(令人震惊)。我希望每个链接的背景颜色不同，但通过两个定义颜色之间的百分比进行设置。

例如，假设我选择了 #000 和 #fff 作为我的颜色。我想说通过 SASS，第一个元素的背景颜色将始终为#000，最后一个元素的背景颜色将始终为#fff。但是，根据导航菜单中的元素数量，百分比将被拉动，并且相应的颜色停止将用于“之间”元素背景。

这是一个插图，以防万一我失去了任何人:

第一个色带代表 4 个菜单项。每个元素的位置均从 100% 中划分，并具有最终的色标。该数字成为该元素的背景。

第二个色带代表 5 个菜单项。其他一切都适用，但现在已完成 5 个元素的计算。

我对此的使用是不想手动输入大量的 :nth-child 选择器。如果他们添加/删除元素，那些 :nth 颜色规则将不再适用。如何使用 css 和 jQuery 做到这一点？

Answer 1

好吧，这是我的尝试，我会尝试尽可能多地注释代码:D 假设 HTML 中有 4 个 div :

<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 #012345
        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; 或类似的函数)。这就是为什么您可以使用 ratioOne、ratioTwo 和 ratioThree

计算 RGB 颜色

我希望我没有犯任何错误，并希望你能明白。正如您所知，这不能通过 SASS 完成，只能通过 JS 完成(因为您想编写更少的代码，嗯？)