Editando apunte: Transiciones: Desplazamientos

Editando apunte: Transiciones: Desplazamientos cerrar apuntes

ID: 51 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: diseño, imágenes, javascript, postales, webmaster
Extras: diseño, imágenes, javascript, postales, webmaster
apunte: - - - - - - - -

<p>
	[rss]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.[/rss]
</p>
<p>
	Para este efecto usaremos tres postales cuyas miniaturas mostramos a continuación:
</p>
<div style="margin: 1em">

<div style="position: relative; overflow: hidden; width: 96px; height: 72px; background-color: aqua; margin: 0 15%; float: left;">
		<div style="position: absolute; width: 96px; height: 72px; top: 0px; left: 0px" title="Santa Claus">
			<img src="postales/Fondos/santa.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 14.600000000000001px; height: 7px; top: 36px; left: 65px" title="gatito">
			<img src="postales/animales/gato8t.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 60px; height: 4px; top: 55px; left: 0px; font-size: 8px; text-align: center; font-style: normal; font-weight: 900; color: black; font-family: Trebuchet MS" title="Feliz Navidad" >
			Feliz Navidad
		</div>
		<div style="position: absolute; width: 60px; height: 4px; top: 55px; left: 0px; font-size: 8px; text-align: center; font-style: normal; font-weight: 900; color: blue; font-family: Trebuchet MS" title="Feliz Navidad" >
			Feliz Navidad
		</div>
	</div>

</div>

<p>
	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.
</p>

<div id="capa_1" style="position: absolute; top: 0; left: 0; width: 480px; height: 360px; background-color: aqua">
		<div style="position: absolute; width: 480px; height: 360px; top: 0px; left: 0px" title="Santa Claus">
			<img src="postales/Fondos/santa.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 73px; height: 35px; top: 182px; left: 329px" title="gatito">
			<img src="postales/animales/gato8t.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 300px; height: 20px; top: 276px; left: 0px; font-size: 40px; text-align: center; font-style: normal; font-weight: 900; color: black; font-family: Trebuchet MS" title="Feliz Navidad" >
			Feliz Navidad
		</div>
		<div style="position: absolute; width: 300px; height: 20px; top: 278px; left: 2px; font-size: 40px; text-align: center; font-style: normal; font-weight: 900; color: blue; font-family: Trebuchet MS" title="Feliz Navidad" >
			Feliz Navidad
		</div>
	</div>

</div>

<div style="text-align: center; margin-bottom: 1em">
	<button type="button" id="boton_f">fundido</button>
	<button type="button" id="boton_n">norte</button>
	<button type="button" id="boton_s">sur</button>
	<button type="button" id="boton_o">oeste</button>
	<button type="button" id="boton_e">este</button>
</div>

<p>
	Al código que ya teníamos del apunte <a href="?titulo=Transiciones%3A+El+Objeto&PHPSESSID=ccur27g1th2be8sfcs9ia5vp12">Transiciones: El Objeto</a>, le hemos añadido lo siguiente:
</p>
<pre class="codigo">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;
	}
}
</pre>
<p>
	Los nombre "dn", "ds", "do" y "de" serían formas abreviadas de "desplazamiento norte", "desplazamiento sur", etc.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación