Градиент на Java-script

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
972
Реакции
635
Баллы
93
...Рылся в архивах, нашел скрипт градиента.
Между <head> и </head> вставляем код:
JavaScript:
<script type="text/javascript">
var tohex = new Array(256);
var hex = "0123456789ABCDEF";
var count = 0;
for (x=0; x<16; x++) {
 for (y=0; y<16; y++) {
 tohex[count] = hex.charAt(x) + hex.charAt(y);
 count++;
 }
}

function ColorCode(hexcode) {
 if (hexcode.length == 7) {
    this.r = parseInt(hexcode.substring(1,3),16);
    this.g = parseInt(hexcode.substring(3,5),16);
    this.b = parseInt(hexcode.substring(5,7),16);
 }
 else if (hexcode.length == 6) {
    this.r = parseInt(hexcode.substring(0,2),16);
    this.g = parseInt(hexcode.substring(2,4),16);
    this.b = parseInt(hexcode.substring(4,6),16);
 }
 else { this.r = this.g = this.b = 0; }
}

function ColorList(hexcodes) {
  var i = 0;
  var c = 0;
  this.codes = new Array(Math.round(hexcodes.length/7));
  while (i < hexcodes.length) {
    if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;
    else {
      this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));
      i += 7;
      ++c;
    }
  }
  this.len = c;
}

function interpolate (x1, y1, x3, y3, x2) {
 if (x3 == x1) return y1
 else return (x2-x1)*(y3-y1)/(x3-x1) + y1
}

function lowcolorindex (x, y, z) {
 if (y == 1) return 0
 else return Math.floor( (x*(z-1))/(y-1) )
}

function hicolorindex (x, y, z, low) {
 if ( low*(y-1) == x*(z-1) ) return low
 else if (y == 1) return 0
 else return Math.floor( (x*(z-1))/(y-1) + 1 )
}

function gradient (thetext,thecolors) {
var colors = new ColorList(thecolors);
var numcolors = colors.len;
var numchars = thetext.length;

for (i=0; i<numchars; ++i) {
    lci = lowcolorindex(i, numchars, numcolors);
    hci = hicolorindex(i, numchars, numcolors, lci);
    rr = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].r,
    hci/(numcolors-1), colors.codes[hci].r, i/(numchars-1)));
    gg = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].g,
    hci/(numcolors-1), colors.codes[hci].g, i/(numchars-1)));
    bb = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].b,
    hci/(numcolors-1), colors.codes[hci].b, i/(numchars-1)));

    document.write(thetext.charAt(i).fontcolor(tohex[rr]+tohex[gg]+tohex[bb]));
    }
}
</script>
...В том месте, где должен быть градиентный текст, вставляем код:
JavaScript:
<script type="text/javascript">
 gradient("Пример градиентной заливки тремя разными цветами",
 "#88FF88 #0000FF #FF0000");
 document.write('<br>');
 gradient("В этом примере уже переливаются шесть разных цветов",
 "#EE7777 #EEEE77 #77EE77 #77EEEE #7777EE #EE77EE");
 document.write('<br>');
 gradient("А здесь используется только два цвета", "#CC00CC #00CC00");
 document.write('<br>');
</script>
П ри вызове функции gradient можно использовать различное количество цветов для заливки в формате HEX.
Скрипт в действии не пробовал, насчет кроссбраузерности - не знаю.
Выглядит так:

gradient.gif


Автор - UsefulScript.ru
 
Сверху Снизу