logoExtra: script.desplazamiento

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:

Transiciones: Desplazamientos
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.
// 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 71 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.desplazamiento) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador