0 Replies - 1075 Views - Last Post: 10 November 2010 - 06:28 AM

#1 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4123
  • View blog
  • Posts: 13,011
  • Joined: 08-June 10

OOF (object oriented fader)

Posted 10 November 2010 - 06:28 AM

Description: For every element to fade, you have to create an object with the target colour values and the target element. This allows for several elements to fade in parallel, although one element either fades in or out. The code as is requires an implementation of Function.bind() as seen in many JS libraries. Basically itís a closure to prevent the redefinition of "this". Alternately you can define your own start/reset functions, which may not require Function.bind(). tested in FF 3.6, Chrome, Safari 5.0 example: // foo being an arbitrary element var f = new Fade(12, 124 , 36, foo); // some kind of green f.steps = 24; // smoothness of color change f.time = 50; // speed of colour change foo.addEventListener("mouseover", f.start.bind(f), true); // DOM-2-Eventa fader script using Javascript OOP
/*
    @creator: Bertold von Dormilich - 2010
    @contributor: Skumpy 
*/

function Fade(r, g, b, elem)
{
	if (typeof elem == "string") {
		elem = document.getElementById(elem);
	}
	if (!(elem instanceof Element)) {
		throw new TypeError("Element rquired");
	}
	this.elem  = elem;
	this.steps = 32;
	this.time  = 100; // 100 ms

	this.origColor = this.toRGB();
	this.currColor = this.toRGB();
	this.endColor  = {
		red:   r,
		blue:  b,
		green: g
	};
	this.diff = {
		red:   r - this.origColor.red,
		green: g - this.origColor.green,
		blue:  b - this.origColor.blue
	};
}
Fade.prototype.toRGB = function ()
{
	var color  = getComputedStyle(this.elem, null).getPropertyValue("color");
	var digits = /rgb((d+), ?(d+), ?(d+))/.exec(color);
	return {
		red:   parseInt(digits[1], 10), 
		green: parseInt(digits[2], 10), 
		blue:  parseInt(digits[3], 10)
	};
};
Fade.prototype.applyCSS = function (cc)
{
	this.elem.style.color = "rgb(" + cc.red + ", " + cc.green + ", " + cc.blue + ")";
};
Fade.prototype.nextColor = function (direction)
{
	var dir = 1;
	if (0 > direction || !direction) {
		dir = -1;
	}
	this.count    += 1;
	this.currColor = {
		red:   Math.round(this.currColor.red   + (dir * this.diff.red / this.steps)),
		blue:  Math.round(this.currColor.blue  + (dir * this.diff.blue / this.steps)),
		green: Math.round(this.currColor.green + (dir * this.diff.green / this.steps))
	};
};
Fade.prototype.fadeIn = function ()
{
	this.nextColor(1);
	this.applyCSS(this.currColor);
	if (this.count == this.steps) {
		this.stop();
		this.applyCSS(this.endColor);
	}
};
Fade.prototype.fadeOut = function ()
{
	this.nextColor(-1);
	this.applyCSS(this.currColor);
	if (this.count == this.steps) {
		this.stop();
		this.applyCSS(this.origColor);
	}
};
Fade.prototype.stop = function ()
{
    clearInterval(this.TID);
    this.count = 0;
};
Fade.prototype.start = function ()
{
	this.stop();
	this.count = 0;
	this.TID   = setInterval(this.fadeIn.bind(this), this.time); 
	
};
Fade.prototype.reset = function ()
{
	this.stop();
	this.count = 0;
	this.TID   = setInterval(this.fadeOut.bind(this), this.time); 
	
};



Is This A Good Question/Topic? 0
  • +

Page 1 of 1