градиент в css-Javascript
1 ответов
По описанию не оень понял: нужно, чтобы первые палочки были светлые, а последние темные? Или чтобы вся полоса при нарастании меняла свой цвет? Вобщем, опишу решения обоих вариантов, а Вы уже выбирайте нужный :)
1. Представим себе, что прогресс-бар состоит из 100 полосочек, по количеству процентов. Одно полосочка - это
[syntax][/syntax]
Эти дивы создаются джаваскриптом при вызове функции "Следующий шаг", в цвет подставляется нужный. Получается в итоге градиентная полоса.
2. Прогресс-бар это див в диве. Внешний див имеет ширину, как у 100%, а внутренний - ширину, в зависимости от выполнения операции. При вызове функции "Следующий шаг" внутренний див меняет ширину и цвет.
Если нужно, могу написать код для каждой из функций.
вот попробывал. прошу прощения, что не доконца оптимизировал и немного криво написано, но задачу решает =]
function ProgressBar(id, lenght, progress, redStart, greenStart, blueStart, redEnd, greenEnd, blueEnd) {
var node;
var i;
var widthDiv, redDiv, greenDiv, blueDiv;
for (i = 0; i < progress; i++) {
widthDiv = String(Math.floor(1 * lenght / 100));
redDiv = String(Math.floor(redStart + 1 * (i + 1) * (redEnd - redStart) / lenght));
greenDiv = String(Math.floor(greenStart + 1 * (i + 1) * (greenEnd - greenStart) / lenght));
blueDiv = String(Math.floor(blueStart + 1 * (i + 1) * (blueEnd - blueStart) / lenght));
node = document.createElement('div');
node.style.width = widthDiv;
node.style.height = "100%";
node.style.display = "inline-block";
node.style.background = "RGB(" + redDiv + "," + greenDiv + "," + blueDiv + ")";
document.getElementById(id).appendChild(node);
}
}
<div style="border:solid 1px black; height:20px; width:200px; float:left" id="progressDiv"
onclick="ProgressBar('progressDiv', 200, 50, 0, 100, 0, 255, 0, 0)">
</div>
body {FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr= '#4086b9' , endColorStr= '#ffffff' , gradientType= '0');}
Решение только для IE к сожалению