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

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
957
Реакции
625
Баллы
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
 
Сверху Снизу