logoExtra: script.transiciones_centradas

Descripción: Inicialización para el apunte "Transiciones: Centradas". También hay una precarga de imágenes.


A continuación mostramos los apuntes asociados a este extra:

Transiciones: Centradas
Ampliando las transiciones hasta ahora recopiladas, presentamos las que son centradas. Concretamente mostraremos aperturas y cierres horizontales, verticales y centrales (este último sería una combinación de los dos primeros).
// Descripción para sindicación:
/*
    [rss]Inicialización para el apunte "Transiciones: Centradas".
    También hay una precarga de imágenes.[/rss]
*/
//<![CDATA[
function precarga_inicio()    {

    porcentaje = document.createElement("div");
    porcentaje.id = "precarga_porcentaje";
    porcentaje.style.opacity = "0";
    porcentaje.style.top = "0";
    porcentaje.style.left = "0";
    porcentaje.style.width = "100%";
    porcentaje.style.height = "100%";
    porcentaje.style.position = "absolute";
    porcentaje.style.backgroundColor = "transparent";

    porcentaje_valor = document.createElement("div");
    porcentaje_valor.id = "precarga_porcentaje_valor";
    porcentaje_valor.style.top = "45%";
    porcentaje_valor.style.left = "10%";
    porcentaje_valor.style.width = "80%";
    porcentaje_valor.style.height = "10%";
    porcentaje_valor.style.opacity = "0.7";
    porcentaje_valor.style.position = "absolute";
    porcentaje_valor.style.backgroundColor = "white";
    porcentaje_valor.style.border = "2px ridge blue";

    porcentaje_valora = document.createElement("div");
    porcentaje_valora.id = "precarga_porcentaje_valora";
    porcentaje_valora.style.top = "0";
    porcentaje_valora.style.left = "0";
    porcentaje_valora.style.width = "0";
    porcentaje_valora.style.height = "100%";
    porcentaje_valora.style.position = "absolute";
    porcentaje_valora.style.backgroundColor = "red";

    porcentaje_valor.appendChild(porcentaje_valora);
    porcentaje.appendChild(porcentaje_valor);
    tag("capas").appendChild(porcentaje);

    for (i = 100; i > 0; i--)    {
        accion = "tag('precarga_porcentaje').style.opacity = '" + (i / 100) + "'";
        setTimeout(accion, i * 20);
    }
    setTimeout(cargar_capas, 2100);
}

var parejas_precarga = [
    {"capa": "capa2", "fondo": "diario.imagen.php?id=6"},
    {"capa": "capa3", "fondo": "diario.imagen.php?id=7"}
];

var imagenes_precarga = [];
var fondos_capas = ["#cccfff", "#fffccc"];
function cargar_capas()    {
    _pares_ = [];
    for (i = 0, total = parejas_precarga.length; i < total; i++)
        _pares_.push(parejas_precarga[i]);
    while(_pares_.length > 0)    {
        pareja = _pares_.pop();
        imagen = document.createElement("img");
        imagen.src = pareja.fondo;
        imagen.id = "imagen_" + pareja.capa;
        imagen.style.border = "3px inset blue";
        imagen.style.backgroundColor = "white";
        imagen.style.position = "absolute";
        imagen.style.overflow = "hidden";
        capa = document.createElement("div");
        capa.id = pareja.capa;
        capa.style.backgroundColor = fondos_capas.pop();
        capa.style.width = "250px";
        capa.style.height = "250px";
        capa.style.top = "0";
        capa.style.left = "0";
        capa.style.position = "absolute";
        capa.style.overflow = "hidden";
        capa.appendChild(imagen);
        tag("capas").insertBefore(capa, tag("capa1"));
        imagenes_precarga.push({"id":"imagen_" + pareja.capa, "estado": false});
    }
    precargando();
}

function precargando()    {
    cargadas = 0;
    total = imagenes_precarga.length;
    for (i = 0; i < total; i++)    {
        cargada = tag(imagenes_precarga[i].id).complete;
        if (cargada && !imagenes_precarga[i].estado)    {
            ancho = tag(imagenes_precarga[i].id).width;
            alto = tag(imagenes_precarga[i].id).height;
            tope = parseInt((247 - alto) / 2);
            lefte = parseInt((247 - ancho) / 2);
            tag(imagenes_precarga[i].id).style.top = tope + "px";
            tag(imagenes_precarga[i].id).style.left = lefte + "px";
        }
        cargadas += (cargada) ? 1 : 0;
    }
    porcentaje = 100 / (total / cargadas);
    tag("precarga_porcentaje_valora").style.width = porcentaje + "%";
    if (porcentaje == 100)    {
        for (i = 100; i > 0; i--)    {
            accion = "tag('precarga_porcentaje').style.opacity = '" + (1 - (i / 100)) + "'";
            setTimeout(accion, i * 20);
        }
        setTimeout(activar_controles, 2000);
    }
    else
        setTimeout(precargando, 100);
}

function activar_controles()    {
    tag("capas").removeChild(tag("precarga_porcentaje"));
    _efectos_ = new objetoTransiciones(2000, 100, 250, 250, _capas_, "capa1", "capas");


    poner_evento(tag("i_1"), "click", efectuar);
    poner_evento(tag("i_2"), "click", efectuar);
    poner_evento(tag("i_3"), "click", efectuar);
}


function precarga_onload()    {
    poner_evento(tag("i_1"), "click", cancelar_evento);
    poner_evento(tag("i_2"), "click", cancelar_evento);
    poner_evento(tag("i_3"), "click", cancelar_evento);
    precarga_inicio();
}

_capas_ = ["capa1", "capa2", "capa3"];
_imgs_ = ["i_1", "i_2", "i_3"];
function efectuar(e) {
    _id__ = e.target.id;
    for (i = 0; i < 3; i++)
        tag(_imgs_[i]).style.opacity = (_imgs_[i] == _id__) ? "1": ".4";
    _tipo_ = (tag("apertura").checked) ? "a" : "c";
    if (tag("control_horizontal").checked)    {
        _sentido_ = "_h"
    }
    else    {
        if (tag("control_vertical").checked)
            _sentido_ = "_v"
        else
            _sentido_ = "_c";
    }
    _efectos_[_tipo_ + _sentido_]("capa" + e.target.id.substr(2));
};

poner_evento(window, "load", precarga_onload);
//]]>

Este código ha sido leído en 68 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.transiciones_centradas) 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