Question

在CSS或JQuery中是否有一种方法可以动态更改li标签的背景，以便它们对每个元素稍微变浅，直到变为白色？

例如，我说有一个包含10个li元素的列表。第一个将有一个红色（＃ff0000）背景，下一个将是一个较浅的红色阴影，依此类推，直到我们到达最后一个背景为白色（#FFFFFF）。 / p>

列表可以是任意长度，我只想让背景颜色来自一种颜色，例如红色到其他颜色，例如白色。我的网站使用jQuery，所以如果我不得不使用它，我不介意。

由于

Answer 1

这是相对容易的，假设您可以构建一个抓取<li>元素列表的选择器。

这样的事情（代码未经测试）：

// get all <li>'s within <ul id="my-list">
var items = $('#my-list li');

// the increment between each color change
var step = (255.0 / items.size());

items.each(function(i, e) {
    var shade = i * step;
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")");
});

Answer 2

虽然比其他答案复杂一点，但这会给你一个很好的线性渐变，从一种颜色到另一种颜色，并允许你使用它们的十六进制表示。

<强>标记

<ul id="my-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<强>码

$(document).ready(function() {
    makeLovely($("#my-list li"), 0x00ff00, 0x0000ff);
});

// code modified from: http://www.herethere.net/~samson/php/color_gradient/color_gradient_generator.php.txt
function makeLovely(items, startColor, endColor) {
    var r0 = (startColor & 0xff0000) >> 16;
    var g0 = (startColor & 0x00ff00) >> 8;
    var b0 = (startColor & 0x0000ff);
    var r1 = (endColor & 0xff0000) >> 16;
    var g1 = (endColor & 0x00ff00) >> 8;
    var b1 = (endColor & 0x0000ff);
    var steps = items.length;

    items.each(function(index) {
        var r = interpolate(r0, r1, index, steps);
        var g = interpolate(g0, g1, index, steps);
        var b = interpolate(b0, b1, index, steps);
        var newColor = zeroFill(((((r << 8) | g) << 8) | b).toString(16), 6);

        // console.log(newColor);

        $(this).css('background-color', newColor);
    });
}

function interpolate(start, end, index, steps) {
    if(start < end) {
        return ((end - start) * (index / steps)) + start;
    }
    return ((start - end) * (1 - (index / steps))) + end;
}

// stolen outright from: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript
function zeroFill(number, width) {
    width -= number.toString().length;
    if (width > 0) {
        return new Array(width + (/\./.test( number ) ? 2 : 1)).join('0') + number;
    }
    return number;
}

当然，如果您愿意，可以将其包含在jQuery插件中。

希望它有所帮助！

Answer 3

简单的插件，允许您修改起始和结束的rgb值：

<script type="text/javascript">

    (function ($) {
        $.fn.transitionColor = function (options) {

            var defaults = {
                redStart: 255,
                greenStart: 0,
                blueStart: 0,
                redEnd: 255,
                greenEnd: 255,
                blueEnd: 255
            };
            options = $.extend(defaults, options);

            return this.each(function () {

                var children = $(this).children();
                var size = children.size();

                var redStep = (options.redEnd - options.redStart) / (size - 1);
                var greenStep = (options.greenEnd - options.greenStart) / (size - 1);
                var blueStep = (options.blueEnd - options.blueStart) / (size - 1);

                children.each(function (i, item) {
                    var red = Math.ceil(options.redStart + (redStep * i));
                    var green = Math.ceil(options.greenStart + (greenStep * i));
                    var blue = Math.ceil(options.blueStart + (blueStep * i));

                    $(item).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')');
                });

            });
        };
    })(jQuery);

    $(document).ready(function () {
        $("#list").transitionColor();
    });

</script>

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

即时更改各个元素的背景颜色

3 个答案: