Descripción: Inicialización para el apunte "Transiciones: Desplazamientos" y definición de transiciones de desplazamiento.
A continuación mostramos los apuntes asociados a este extra:
// Descripción para sindicación:
/*
[rss]Inicialización para el apunte "Transiciones: Desplazamientos"
y definición de transiciones de desplazamiento.[/rss]
*/
//<![CDATA[
function objetoTransiciones(l, f, an, al, c, v, b) {
this._lapsus_ = l;// milisegundos de la transición
this._fotogramas_ = f;// número de fotogramas por _lapsus_
this._escala_ = l / f;
this._ancho_ = an;// anchura de la zona de transición
this._alto_ = al;// altura de la zona de transición
this._capas_ = c;// array con el id de las capas afectadas
this._visible_ = v;// primera capa visible al inicio. Se actualizará en cada transición...
this._base_ = b;// contenedor de las capas
_resguardamos = tag(this._visible_).cloneNode(true);
tag(this._visible_).parentNode.removeChild(tag(this._visible_))
tag(this._base_).appendChild(_resguardamos);
this.id_temp = "objetoTransiciones_" + Math.random() * 1000;
capa_temp = document.createElement("div");
capa_temp.style.position = "absolute";
capa_temp.id = this.id_temp;
tag(this._base_).appendChild(capa_temp);
this._limpiar_ = function() {
while (tag(this.id_temp).hasChildNodes())
tag(this.id_temp).removeChild(tag(this.id_temp).firstChild);
}
this.asignaciones = function(x) {
_resguardar = tag(this._visible_).cloneNode(true);
tag(this._visible_).parentNode.removeChild(tag(this._visible_));
tag(this._base_).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
tag(x).parentNode.removeChild(tag(x));
tag(this._base_).appendChild(_resguardar);
//alert(x);
}
}
objetoTransiciones.prototype.fundido = function(x) {
this._limpiar_()
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
this._visible_ = x;
tag(x).style.opacity = "0";
tag(x).style.top = "0";
tag(x).style.left = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_)
setTimeout("tag('" + x + "').style.opacity = " + (i / this._lapsus_), (i / this._lapsus_) * this._lapsus_);
}
}
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;
}
}
var _desplazamientos_;
var _desplazamiento_actual_ = 0;
var _capas_ = ["capa_1", "capa_2", "capa_3"];
resguardamos_transiciones_desplazamiento = window.onload;
window.onload = function() {
_desplazamientos_ = new objetoTransiciones(500, 100, 480, 360, _capas_, "capa_1", "capas");
poner_evento(tag("boton_f"), "click", function(x){_desplazamientos_.fundido(_capas_[++_desplazamiento_actual_ % _capas_.length])});
poner_evento(tag("boton_n"), "click", function(x){_desplazamientos_.dn(_capas_[++_desplazamiento_actual_ % _capas_.length])});
poner_evento(tag("boton_s"), "click", function(x){_desplazamientos_.ds(_capas_[++_desplazamiento_actual_ % _capas_.length])});
poner_evento(tag("boton_e"), "click", function(x){_desplazamientos_.de(_capas_[++_desplazamiento_actual_ % _capas_.length])});
poner_evento(tag("boton_o"), "click", function(x){_desplazamientos_.do(_capas_[++_desplazamiento_actual_ % _capas_.length])});
if (resguardamos_transiciones_desplazamiento != undefined)
resguardamos_transiciones_desplazamiento();
}
//]]>
Este código ha sido leído en 97 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.desplazamiento)
Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador