JavaScript скрипты


Градиенты в тексте

Размещена 24 июля, 2008 года


Задача: найти способ для создания градиента в произвольном элементе, содержащем текст (или гипертекст)
Обратите внимание на заголовок. Замечаете там градиент из зеленого в желтый? Нет? Значит у вас отключен JavaScript и вы можете смело покинуть эту страницу :)

Решается чисто косметическая задача. Дизайнер (или вы сами) нарисовал(и) макет в котором обнаруживается градиент символов текста. Что с ним делать?

Верстка

Можно заверстать кусок кода с градиентом. Приходят в голову следующие мысли:
• вырезать этот градиентый текст в виде картинки, и влепить его таким образом на страницу;
• каждый символ пресловутого текста обернуть в span, и задать спану свой color;
Второй способ — это страшная кара для верстальщика, ососбенно если символов много. Однако он подсказывает более изящное решение.

Скрипты

Можно написать JavaScript-сценарий, который будет заниматься оборачиванием символов в спаны вместо верстальщика. При этом скрипт должен ходить только по текстовым узлам, т.к. в нашем блоке с текстом могут быть ссылки, картинки и вообще что угодно.

Функцию назовем textGradient. В качестве аргументов она будет принимать имя тега с текстом, имя класса (если класса нет, то пустую строку) и массив из двух крайних цветов градиента в формате [RRGGBB,RRGGBB]. Потребуется три дополнительный функции: две для перевода и шестнадцатеричного формата в десятиричный и обратно. И одна для сбора всех узлов-потомков для заданного узла.

Собственно скрипт (можете его открыть в новом окне) :
• Код JavaScript
// Функция для перевода цвета из шестнадцатиричного представления формата RRGGBB
// в массив из трех десятиричных значений формата [rrr,ggg,bbb].

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;
}

// Функция для выставления тестового градиента, принимает 3 аргумента:
// tagName - имя тега с текстом
// className - название класса элемента (можно пропустить указав пустую строку или false)
// colors - массив с 2-мя цветами формата ["RRGGBB", "RRGGBB"]
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;
         // Все символы текстового узла обрамляем в SPAN-ы c нужным цветом
         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++;
         }
         // Заменяем текстовый узел на узел с подсвеченными span-ами
         newchild = document.createElement("span");
         newchild.innerHTML = html;
         child.parentNode.replaceChild(newchild, child);
      }
   }
}

Результат

Примеры вызовов:
• Код HTML
<h1 class="gradient">Заголовок с градиентом FF0000 &rarr; 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>

Вот как это выглядет:

Заголовок с градиентом FF0000 → 00FF00

DIV с изображением
Текст. Просто текст. Всего лишь текст. Текст. Просто текст. Всего лишь текст.Текст. Просто текст. Всего лишь текст.Текст. Просто текст. Всего лишь текст. Текст. Просто текст.



// Все права на статью принадлежат сайту fastcoder.org
SAPE все усложнил?

MainLink - простая и прибыльная продажа ссылок!

Последние поступления:

Размещена 10 августа 2020 года

Я по ТВ видел, что через 10 лет мы будем жить лучше, чем в Германии...
Я не понял, что это они с Германией сделать хотят?!

читать далее…

ТехЗадание на Землю

Размещена 14 марта 2018 года

Пpоект Genesis (из коpпоpативной пеpеписки)

читать далее…

Шпаргалка по работе с Vim

Размещена 05 декабря 2017 года

Vim довольно мощный редактор, но работа с ним не всегда наглядна.
Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

читать далее…

Ошибка: Error: Cannot find a valid baseurl for repo

Размещена 13 сентабря 2017 года

Если возникает ошибка на centos 5 вида
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Eg. Invalid release/

читать далее…

Linux Optimization

Размещена 30 июля 2012 года

Prelink

читать далее…