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:
// 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 94 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.transiciones_centradas)
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