Gradiente //Repositório JavaScript

Descrição

Dada as cores inicial e final e a quantidade de passos em que deverá ser feito o efeito gradiente, a classe permite retornar a cor que deve ser usada em cada passo.
Criado: 2008.03.14

Código (Download)

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/classes/gradient [rev. #0]

Gradient = function(i, e, t){
    var o = this;
    o.i = i, o.e = e, o.t = --t, o._ = 0, o.a = [];
    o.fix = function(v){return v.length < 2 ? "0" + v : v;}
    for(var x, j = 0; j < 3; j++)
        o.a[j] = [((e >> (j << 3) & 0xff) - (x = (i >> (j << 3) & 0xff))) / t, x];
};
Gradient.prototype.getColorAt = function(a){
    for(var o = this, a = a > o.t ? o.t : a < 0 ? 0 : a, s = "", i = 0; i < 3; i++)
        s = o.fix((o.a[i][1] + o.a[i][0] * a >> 0).toString(16)) + s;
    return s;
};
Gradient.prototype.next = function(){
    var o = this;
    return o.t >= o._ && o.getColorAt(o._++);
};
Gradient.prototype.reset = function(){
    this._ = 0;
};

Exemplo (Exemplo)

<style type="text/css">
    .grad{font-size:1px;} /*IE*/
</style>
<script type="text/javascript">
//<![CDATA[

var g = new Gradient(0xff0000, 0x0, 256),
d = document, f = d.createDocumentFragment(),
line = d.createElement("div");
line.className = "grad";
line.style.height = "3px";

for(var color; color = g.next();)
    f.appendChild(line.cloneNode(false)).style.background = "#" + color;

d.body.appendChild(f);

//]]>
</script>

Ajuda

Construtor

Gradient(start: Number, final: Number, steps: Number)

Gera uma instância de Gradient.

start: cor inicial
final: cor final
steps: quantidade de passos do efeito

Métodos

Gradient.getColorAt(step: Number): String

Retorna a cor no passo dado em hexadecimal.

step: passo desejado, o valor máximo é o argumento "steps" do construtor - 1

Gradient.next(void): Object

Incrementa o passo atual da classe e retorna a cor em forma de String, ou false quando ele alcança o fim.

Gradient.reset(void): void

Reinicia o passo atual da classe.

JSFromHell.com