Заметки веб-работника
25 мая 2006

Текст с переливом

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

Представленный ниже скрипт находит на странице все необходимые одноименные теги и делает цвет текста в них неоднородным.

var hexa = new Array(16); // массив, представляющий 16-ые цифры
for(var i = 0; i < 10; i++) 
   hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 

// Переводим из 10-й СИ в 16-ю
function hex(i)
{
   if (i < 0) 
      return "00";
   else if (i > 255)
      return "ff";
   else 
      return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

// Переводим 16-ую запись цвета в 10-ую,
// разбиваем на три части, записываем в массив
function dehex(color)
{ 
   color = color.toLowerCase();
   var colorArr = new Array(3); 
   for (i = 1 ; i < 7; i++)
   { 
      for (j = 0; j < 16; j++)
      { 
         if (color.charAt(i) == hexa[j])
            if (i%2 != 0) colorArr[Math.floor((i-1)/2)] = eval(j)*16; 
         else 
            colorArr[Math.floor((i-1)/2)] += eval(j); 
      } 
   } 
   return colorArr; 
}

// Добавляем текстовому содержимому всех найденных тегов (tagname) цветовой перелив,
// для этого каждый символ обрамляем span-ом с нужным текстовым цветом
//
// tagname - имя тега
// startcolor - стартовый цвет
// endcolor - конечный цвет
// freq - частота заполнения (количество переходов от startcolor к endcolor)
// loop - индикатор, если loop == true, то содержимое каждого нового тега, является цветовым продолжением предыдущего
function colorplay(tagname, startcolor, endcolor, freq, loop)
{
   var sc0 = dehex(startcolor); // начальный стартовый цвет (массив из трех элементов)
   var ec0 = dehex(endcolor); // начальный конечный цвет (массив из трех элементов)
   
   if (document.getElementsByTagName(tagname))
   {
      var tags = document.getElementsByTagName(tagname);
      var i = 0;
      
      while (i < tags.length)
      {
         if(!loop || Math.floor(i*freq)%2 == 0)
         {
            sc = sc0; // текущий стартовый цвет
            ec = ec0; // текущий конечный цвет
         }
         else
         {
            sc = ec0;
            ec = sc0;
         }
         
         var oldStr = tags[i].innerHTML;
         var newStr = "";
         
         var n = oldStr.replace(/\<.*\>/g, "").replace(/\s*/g, "").length; // количество обрамляемых символов (без учета внутренних тегов и пробелов)
         var d = (loop) ? Math.floor(i*(freq - Math.floor(freq))*n/freq) : 0; // смещение, для создания цветового продолжения предыдущего тега
         var q = d; // счетчик символов, которые будут обрамляться span-ами
         
         for (e = 0; e < oldStr.length; e++)
         {
            q++;
            // После полного цикла меняем стартовый и конечный цвет местами
            if ((q - 1)*freq%n > q*freq%n)
            {
               var tmp = sc;
               sc = ec;
               ec = tmp;
            }
            
            // Обходим стороной пробелы и внутренние теги
            while (oldStr.charAt(e).match(/\s/) || oldStr.charAt(e) == "<")
            {
               // Пробелы нам не нужны
               if (oldStr.charAt(e).match(/\s/))
               {
                  newStr += oldStr.charAt(e);
                  e++;
               }
               if (e >= oldStr.length) break;
               
               // Внутренние теги также не нужно колоризовать 
               if (oldStr.charAt(e) == "<")
               {   
                  while (oldStr.charAt(e) !== ">" && e < oldStr.length)
                  {
                     newStr += oldStr.charAt(e);
                     e++;
                  }
                  if (e >= oldStr.length) break;
                  newStr += oldStr.charAt(e);
                  e++;
               }
               if (e >= oldStr.length) break;
            }
            if (e >= oldStr.length) break;
            
            var symbol = (oldStr.charAt(e) != "&") ? oldStr.charAt(e) : ""; // символ для обрамления span-ом; в случае спецсимвола, symbol - группа символов
            
            // Группу символов, составляющую спецсимвол, обрамляем span-ом как один символ
            if (oldStr.charAt(e) == "&")
            {   
               symbol = "";
               while ((oldStr.charAt(e) !== ";" || oldStr.charAt(e).match(/\s/)) && e < oldStr.length)
               {
                  symbol += oldStr.charAt(e);
                  e++;
               }
               if (e >= oldStr.length) break;
               symbol += oldStr.charAt(e);
            }
            if (e >= oldStr.length) break;
            
            var clr = hex(sc[0] + Math.floor((q*freq%n)*(ec[0] - sc[0])/n)) + hex(sc[1] + Math.floor((q*freq%n)*(ec[1] - sc[1])/n)) + hex(sc[2] + Math.floor((q*freq%n)*(ec[2] - sc[2])/n));
            newStr += "<span style=\"color:#" + clr  + "\">" + symbol + "</span>";
         }
         tags[i].innerHTML = newStr;
         i++;
      }
   }
}

Следующий блок выступает в качестве работающего примера. Содержащиеся в нем заголовки третьего уровня попадают под влияние скрипта, в случае привязки его к событию onload страницы (например, так: window.onload = colorplay('H3', '#007399', '#FFFFFF', 1.4, true);).

Пример

Это — заголовок третьего уровня

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Еще один заголовок третьего уровня

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Это тоже заголовок третьего уровня

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Теги: JavaScript

_______

Вы можете оставить свой отзыв по данной статье:

  Имя
  E-mail (не публикуется)
  Веб-сайт

Комментарий (Теги форматирования не поддерживаются)