Задача: найти способ для создания градиента в произвольном элементе, содержащем текст (или гипертекст)
Обратите внимание на заголовок. Замечаете там градиент из красного в желтый? Нет? Значит у вас отключен JavaScript и вы можете смело покинуть эту страницу :)
Решается чисто косметическая задача. Дизайнер (или вы сами) нарисовал(и) макет в котором обнаруживается градиент символов текста. Что с ним делать?
Заверстать
Можно заверстать кусок кода с градиентом. Приходят в голову следующие мысли:
• вырезать этот градиентый текст в виде картинки, и влепить его таким образом на страницу;
• каждый символ пресловутого текста обернуть в span, и задать спану свой color;
Второй способ — это страшная кара для верстальщика, ососбенно если символов много. Однако он подсказывает более изящное решение.
Запрограммить
Можно написать JavaScript-сценарий, который будет заниматься оборачиванием символов в спаны вместо верстальщика. При этом скрипт должен ходить только по текстовым узлам, т.к. в нашем блоке с текстом могут быть ссылки, картинки и вообще что угодно.
Функцию назовем textGradient. В качестве аргументов она будет принимать имя тега с текстом, имя класса (если класса нет, то пустую строку) и массив из двух крайних цветов градиента в формате [RRGGBB,RRGGBB]. Потребуется три дополнительный функции: две для перевода и шестнадцатеричного формата в десятиричный и обратно. И одна для сбора всех узлов-потомков для заданного узла.
Собственно скрипт:
• Код JavaScript
function hexToDec(hex) {
var i, hash, dec = [];
hash = {
'A' : 10, 'B' : 11, 'C' : 12, 'D' : 13, 'E' : 14, 'F' : 15
}
for (i = 0; i <= 9; i++) hash[''+i] = i;
for (i = 0; i < hex.length; i++) {
if (i % 2 == 0) dec[parseInt(i / 2)] = hash[hex.charAt(i)] * 16;
else dec[parseInt(i / 2)] += hash[hex.charAt(i)];
}
return dec;
}
function decToHex(decArray) {
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var out = "#";
for (var i = 0; i < decArray.length; i++) {
dec = parseInt(decArray[i]);
out += hex[parseInt(dec / 16)] + hex[dec % 16];
}
return out;
}
function nodeList(parentNode, list, level) {
var i, node, count;
if (typeof list == "undefined") list = new Array();
if (typeof level == "undefined") level = 0;
level++;
for (i = 0; i < parentNode.childNodes.length; i++) {
node = parentNode.childNodes[i];
count = list.length;
list[count] = new Array();
list[count][0] = node;
list[count][1] = level;
nodeList(node, list, level);
}
return list;
}
function textGradient(tagName, className, colors) {
var i, j, k, count, rgb = [], tags, text, html = "", simb, childs, child, newchild;
var red, green, blue;
rgb[0] = hexToDec(colors[0]);
rgb[1] = hexToDec(colors[1]);
tags = document.getElementsByTagName(tagName);
for (i = 0; i < tags.length; i++) {
if (className) if (tags[i].className.indexOf(className) == -1) continue;
text = tags[i].innerText ? tags[i].innerText : tags[i].textContent;
childs = nodeList(tags[i]);
count = 0;
for (j = 0; j < childs.length; j++) {
child = childs[j][0];
if (child.nodeType != 3) continue;
html = "";
for (k = 0; k < child.nodeValue.length; k++) {
simb = childs[j][0].nodeValue.charAt(k);
if (simb == " ") {html += " "; continue;}
red = parseInt(rgb[0][0] + (rgb[1][0] - rgb[0][0]) * (count / text.length));
green = parseInt(rgb[0][1] + (rgb[1][1] - rgb[0][1]) * (count / text.length));
blue = parseInt(rgb[0][2] + (rgb[1][2] - rgb[0][2]) * (count / text.length));
html += "<span style=\"color:" + decToHex([red, green, blue]) + "\">" + simb + "<\/span>";
count++;
}
newchild = document.createElement("span");
newchild.innerHTML = html;
child.parentNode.replaceChild(newchild, child);
}
}
}
Результат
Примеры вызовов:
• Код HTML
<h1 class="gradient">Заголовок с градиентом FF0000 → 00FF00</h1>
<script type="text/javascript">textGradient('h1', 'gradient', ['FF0000','00FF00']);</script>
<div class="gradient">DIV со <a href="#">ссылкой</a></div>
<script type="text/javascript">textGradient('div', 'gradient', ['FF0000','FFFF00']);</script>
<div class="gradientimg">DIV с <img src="gradient.gif" width="30" height="15" alt=""> изображением</div>
<script type="text/javascript">textGradient('div', 'gradientimg', ['0000FF','F1F1F1']);</script>
<div class="gradienttext">Текст. Просто текст. Всего лишь текст. Текст. Просто текст. Всего лишь текст.Текст. Просто текст. Всего лишь текст.Текст. Просто текст. Всего лишь текст. Текст. Просто текст.</div>
<script type="text/javascript">textGradient('div', 'gradienttext', ['000000','F1F1F1']);</script>
Примеры в работе смотрим здесь.
