Измените цвет фона отдельных элементов на лету
Есть ли путь в CSS или JQuery, где я могу динамично изменить фон li теги, таким образом, они становятся немного легче для каждого элемента, пока это не добирается до белого?
Например, скажите, что у меня был список 10 li элементы. Первое имело бы красный (#ff0000) фон, следующий затем будет более легким оттенком красного цвета, и так далее и так далее, пока мы не добрались до последнего, который будет иметь фон белого (#FFFFFF).
Список может быть любой длиной, и я просто хочу, чтобы цвет фона пошел от одного цвета, например, красный к другому цвету, например, белый. Мой сайт использует jQuery поэтому, если я должен использовать это, я не возражаю.
Спасибо
3 ответа
Это относительно просто, если предположить, что вы можете создать селектор, который захватывает ваш список из элементов.
Примерно так (код не проверен):
// 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 + ")");
});
Простой плагин, позволяющий изменять начальное и конечное значения 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>
Хотя это немного сложнее, чем другие ответы, это даст вам красивый линейный градиент от одного цвета к другому и позволит вам использовать их шестнадцатеричное представление.
разметка
<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, если вы предпочитаете.
Надеюсь, это поможет!