Floating Div – Orientado a Objecto

El creador de este plugin ha sido siempre un programador de C++, esto ha hecho que su metodología de programación sea siempre orientada a objetos. En este caso este plugin está creado como un Objeto-Flotante (FloatObject class) la cual es responsable del cálculo y del movimiento dentro del DOM. Así pues hay dos métodos: updateLocation y move.
Este es el código completo del objeto, podemos grabarlo y subirlo directamente a la web para hacer una llamada simple al script:

function FloatObject(jqObj, params)
{
	this.jqObj = jqObj;

	switch(params.speed)
	{
		case 'fast': this.steps = 5; break;
		case 'normal': this.steps = 10; break;
		case 'slow': this.steps = 20; break;
		default: this.steps = 10;
	};

	var offset = this.jqObj.offset();

	this.currentX = offset.left;
	this.currentY = offset.top;

	this.origX = typeof(params.x) == "string" ?  this.currentX : params.x;
	this.origY = typeof(params.y) == "string" ?  this.currentY : params.y;
	//if( params.y) this.origY = params.y;

	//now we make sure the object is in absolute positions.
	this.jqObj.css({'position':'absolute' , 'top':this.currentY ,'left':this.currentX});
}

FloatObject.prototype.updateLocation = function()
{
	this.updatedX = $(window).scrollLeft() + this.origX;
	this.updatedY = $(window).scrollTop()+ this.origY;

	this.dx = Math.abs(this.updatedX - this.currentX );
	this.dy = Math.abs(this.updatedY - this.currentY );

	return this.dx || this.dy;
}

FloatObject.prototype.move = function()
{
	if( this.jqObj.css("position") != "absolute" ) return;
	var cx = 0;
	var cy = 0;

	if( this.dx > 0 )
	{
		if( this.dx < this.steps / 2 )
			cx = (this.dx >= 1) ? 1 : 0;
		else
			cx = Math.round(this.dx/this.steps);

		if( this.currentX < this.updatedX )
			this.currentX += cx;
		else
			this.currentX -= cx;
	}

	if( this.dy > 0 )
	{
		if( this.dy < this.steps / 2 )
			cy = (this.dy >= 1) ? 1 : 0;
		else
			cy = Math.round(this.dy/this.steps);

		if( this.currentY < this.updatedY )
			this.currentY += cy;
		else
			this.currentY -= cy;
	}

	this.jqObj.css({'left':this.currentX, 'top': this.currentY });
}

De acuerdo a poder manejar todos los movimientos de los objetos flotantes, se extiende el objeto jQuery agregandole un gestor de movimiento o desplazamiento. Básicamente lo que tenemos es un objeto creado y adjuntado a las clases de jQuery y sus instancias.

Este objeto deja la matriz de todos los objetos flotantes que el usuario ha seleccionado desde el código e invoca los métodos necesarios. El gestor es también el responsable de registrar a los eventos "resize" y a "scroll" para enviar las instrucciones que permiten el recálculo de su posición.

Aqui tenemos el código completo del gestor del objeto:

$.floatMgr = {
	FOArray: new Array() ,
	timer: null ,

	initializeFO: function(jqObj,params)
	{
		var settings =  $.extend({
			x: 0 ,
			y: 0 ,
			speed: 'normal'	},params||{});
		var newFO = new FloatObject(jqObj,settings);

		$.floatMgr.FOArray.push(newFO);

		if( !$.floatMgr.timer ) $.floatMgr.adjustFO();

		//now making sure we are registered to all required window events
		if( !$.floatMgr.registeredEvents )
		{
				$(window).bind("resize", $.floatMgr.onChange);
				$(window).bind("scroll", $.floatMgr.onChange);
				$.floatMgr.registeredEvents = true;
		}
	} , 

	adjustFO: function()
	{
		$.floatMgr.timer = null;

		var moveFO = false;

		for( var i = 0 ; i < $.floatMgr.FOArray.length ; i++ )
		{
			 FO = $.floatMgr.FOArray[i];
			 if( FO.updateLocation() )  moveFO = true;
		}

		if( moveFO )
		{
			for( var i = 0 ; i < $.floatMgr.FOArray.length ; i++ )
			{
				FO = $.floatMgr.FOArray[i];
				FO.move();
			}

			if( !$.floatMgr.timer ) $.floatMgr.timer = setTimeout($.floatMgr.adjustFO,50);
		}
	}	,

	onChange: function()
	{
		if( !$.floatMgr.timer ) $.floatMgr.adjustFO();
	}
};

Documentacion

Ahora explicaremos como usar el plugin en nuestro proyecto. El plugin tiene solo un método:

$.makeFloat(params);

El método solo trabaja desde el primer elemento encontrado dentro del objeto jQuery.

Parámetros

Este es un objeto que envia directamente el método donde se encuentra flotando el objeto y en que velocidad debe realizar el desplazamiento.

x: debe ser un número entero y fija la posición del eje X  o la cadena ‘current’ que indica al gestor que use la posición actual.

y: uso idéntico que el valor x.

Speed: ’slow’, ‘normal’ ,’fast’. (velocidad : lento, normal, rápido)

Todos los parámetros son opcionales y los valores por defecto están siempre listos si el usuario no los redefine.

Usos

Todo lo que necesitamos hacer es seleccionar el objeto y fijar una velocidad específica, así como la posición, el resto será generado automáticamente.

$(document).ready(main);
function main()
{
	$("#video").makeFloat({x:"current",y:"current"});
}

Existe una página de demostración realizada por el autor que veremos de forma similar a la actual como opera demo page.

Tambien disponemos en la web de jQuery toda la información relativa al plugin.

Visita la web original