El diario de Pepe Molina (Caricatos)

Las transiciones de desplazamiento pueden hacerse de más de una manera, pero nosotros pondremos las dos presentaciones juntas y modificaremos la zona visible con estilos de posicionamiento.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

Mi conciencia tiene para mí más peso que la opinión de todo el mundo

Marcus Tullius Ciceron, político y escritor latino (106-43 a. C.).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

Transiciones: Desplazamientos

Publicado el día 03 de noviembre de 2011
id=51; categorías: Vicisitudes de un Webmaster, Programación

Las transiciones de desplazamiento pueden hacerse de más de una manera, pero nosotros pondremos las dos presentaciones juntas y modificaremos la zona visible con estilos de posicionamiento.

Para este efecto usaremos tres postales cuyas miniaturas mostramos a continuación:

Feliz Navidad

Los botones representan los cuatro puntos cardinales por donde aparecerán las postales, y para asegurarnos de la compatibilidad con la transición que teníamos (fundido), también le asociamos otro botón.

Feliz Navidad

Al código que ya teníamos del apunte Transiciones: El Objeto, le hemos añadido lo siguiente:

objetoTransiciones.prototype.dn = function(x)	{
	this._limpiar_();
	if (x == this._visible_)	{
		return;
	}
	else	{
		this.asignaciones(x);
		_resguardar = tag(this._visible_).cloneNode(true);
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);
		_resguardar = tag(x).cloneNode(true);
		_resguardar.style.top = -this._alto_ + "px";
		_resguardar.style.left = "0";
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);

		_resguardar = tag(this.id_temp).cloneNode(true);
		tag(this._base_).removeChild(tag(this.id_temp));
		tag(this._base_).appendChild(_resguardar);
		tag(this.id_temp).style.top = "0";
		tag(this.id_temp).style.left = "0";
		for (i = 0; i <= this._lapsus_; i += this._escala_)	{
			setTimeout("tag('" + this.id_temp + "').style.top = '" + ((i / this._lapsus_) * this._alto_) + "px'", (i / this._lapsus_) * this._lapsus_);
		}
		this._visible_ = x;
	}
}

objetoTransiciones.prototype.ds = function(x)	{
	this._limpiar_();
	if (x == this._visible_)	{
		return;
	}
	else	{
		this.asignaciones(x);
		_resguardar = tag(this._visible_).cloneNode(true);
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);
		_resguardar = tag(x).cloneNode(true);
		_resguardar.style.top = this._alto_ + "px";
		_resguardar.style.left = "0";
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);

		_resguardar = tag(this.id_temp).cloneNode(true);
		tag(this._base_).removeChild(tag(this.id_temp));
		tag(this._base_).appendChild(_resguardar);
		tag(this.id_temp).style.top = "0";
		tag(this.id_temp).style.left = "0";
		for (i = 0; i <= this._lapsus_; i += this._escala_)	{
			setTimeout("tag('" + this.id_temp + "').style.top = '" + -((i / this._lapsus_) * this._alto_) + "px'", (i / this._lapsus_) * this._lapsus_);
		}
		this._visible_ = x;
	}
}

objetoTransiciones.prototype.do = function(x)	{
	this._limpiar_();
	if (x == this._visible_)	{
		return;
	}
	else	{
		this.asignaciones(x);
		_resguardar = tag(this._visible_).cloneNode(true);
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);
		_resguardar = tag(x).cloneNode(true);
		_resguardar.style.left = -this._ancho_ + "px";
		_resguardar.style.top = "0";
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);

		_resguardar = tag(this.id_temp).cloneNode(true);
		tag(this._base_).removeChild(tag(this.id_temp));
		tag(this._base_).appendChild(_resguardar);
		tag(this.id_temp).style.left = "0";
		tag(this.id_temp).style.top = "0";
		for (i = 0; i <= this._lapsus_; i += this._escala_)	{
			setTimeout("tag('" + this.id_temp + "').style.left = '" + ((i / this._lapsus_) * this._ancho_) + "px'", (i / this._lapsus_) * this._lapsus_);
		}
		this._visible_ = x;
	}
}

objetoTransiciones.prototype.de = function(x)	{
	this._limpiar_();
	if (x == this._visible_)	{
		return;
	}
	else	{
		this.asignaciones(x);
		_resguardar = tag(this._visible_).cloneNode(true);
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);
		_resguardar = tag(x).cloneNode(true);
		_resguardar.style.left = this._ancho_ + "px";
		_resguardar.style.top = "0";
		_resguardar.id = "id_temp2_" + (Math.random() * 1000);
		tag(this.id_temp).appendChild(_resguardar);

		_resguardar = tag(this.id_temp).cloneNode(true);
		tag(this._base_).removeChild(tag(this.id_temp));
		tag(this._base_).appendChild(_resguardar);
		tag(this.id_temp).style.left = "0";
		tag(this.id_temp).style.top = "0";
		for (i = 0; i <= this._lapsus_; i += this._escala_)	{
			setTimeout("tag('" + this.id_temp + "').style.left = '" + -((i / this._lapsus_) * this._ancho_) + "px'", (i / this._lapsus_) * this._lapsus_);
		}
		this._visible_ = x;
	}
}

Los nombre "dn", "ds", "do" y "de" serían formas abreviadas de "desplazamiento norte", "desplazamiento sur", etc.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>