Hola amigos:
Estoy haciendo un proyector de diapositivas, y en un principio va bien, pero preparé unas pocas transiciones (descubrir por los 4 costados) y mozilla no hace "ni puto caso"
Este es el código:
Código PHP:
function fichas(imagen, tiempo) {
this.imagen = imagen;
this.tiempo = tiempo;
}
var fichero = new Array();
fichero[0] = new fichas('fotos/maxi/Diapositiva52.jpg', 13000);
fichero[1] = new fichas('fotos/maxi/Diapositiva62.jpg', 13000);
fichero[2] = new fichas('fotos/maxi/Diapositiva66.jpg', 13000);
fichero[3] = new fichas('fotos/maxi/Diapositiva73.jpg', 13000);
fichero[4] = new fichas('fotos/maxi/Diapositiva82.jpg', 13000);
fichero[5] = new fichas('fotos/maxi/Diapositiva91.jpg', 13000);
fichero[6] = new fichas('fotos/maxi/Diapositiva95.jpg', 15000);
fichero[7] = new fichas('fotos/maxi/Diapositiva100.jpg', 13000);
var actual = 0;
var capa1, capa2;
var capaX = 0;
var capaY = 0;
var alto, ancho;
var foto1, foto2;
var principio = 0;
function iniEfecto() {
capa2.style.left = 0;
capa2.style.top = 0;
capaX = 0; capaY = 0;
efectos[Math.floor(Math.random() * efectos.length)]();
/*
switch(Math.floor(Math.random() * efectos.length)) {
case 0: izqADer();
break;
case 1: derAIzq();
break;
case 2: arrAAba();
break;
case 3: abaAArr();
break;
otherwise
derAIzq();
break;
}
*/
}
var efectos = [izqADer, derAIzq, arrAAba, abaAArr];
function izqADer() {
capaX = capaX + 10;
capa2.style.left = capaX;
if (parseInt(capaX) < parseInt(ancho)) setTimeout("izqADer()", 10);
}
function derAIzq() {
capaX = capaX - 10;
capa2.style.left = capaX;
if (parseInt(capaX) > parseInt(ancho * -1)) setTimeout("derAIzq()", 10);
}
function arrAAba() {
capaY = capaY + 10;
capa2.style.top = capaY;
if (parseInt(capaY) < parseInt(alto * 1)) setTimeout("arrAAba()", 10);
}
function abaAArr() {
capaY = capaY - 10;
capa2.style.top = capaY;
if (parseInt(capaY) > parseInt(alto * -1)) setTimeout("abaAArr()", 10);
}
function presentar() {
iniEfecto();
var siguiente = (actual + 1) % fichero.length;
window.status = "foto: " + fichero[siguiente].imagen;
asignarFondo(capa2, fichero[actual].imagen);
asignarFondo(capa1, fichero[siguiente].imagen);
var tiempo = fichero[actual].tiempo;
actual = siguiente;
setTimeout("presentar()", tiempo);
}
function asignarFondo(capa, imagen) {
var salida = "url(" + imagen + ")";
capa.style.backgroundImage = salida;
}
function crearCapa() {
capa = document.createElement("div");
capa.style.backgroundPosition = "center center";
capa.style.backgroundAttachment = "fixed";
capa.style.backgroundRepeat = "no-repeat";
capa.style.top = 0;
capa.style.left = 0;
capa.style.margin = "0";
capa.style.height = "100%";
capa.style.width = "100%";
capa.style.overflow = "hidden";
capa.style.position = "absolute";
return capa;
}
function proyector() {
document.body.style.margin = 0;
document.body.style.width = "100%";
document.body.style.height = "100%";
capa1 = crearCapa();
document.body.appendChild(capa1);
capa2 = crearCapa();
capa1.appendChild(capa2);
ancho = (document.all) ? document.body.offsetWidth : window.innerWidth;
alto = (document.all) ? document.body.offsetHeight : window.innerHeight;
foto1 = new Image();
foto1.src = fichero[0].imagen;
foto2 = new Image();
foto2.src = fichero[1].imagen;
asignarFondo(capa2, fichero[0].imagen);
asignarFondo(capa1, fichero[1].imagen);
window.status = "foto: " + fichero[0].imagen;
setTimeout("presentar()", fichero[actual].tiempo);
}
function ambiente(sonido) {
var musiquita = document.createElement("embed");
musiquita.src = sonido;
musiquita.loop = true;
musiquita.style.display = "none";
document.body.appendChild(musiquita);
}
se puede ver aquí:
http://www.pepemolina.com/imagenes/proyector.html
Se puede ver un comentario que pretendía ser una alternativa a los efectos...
No lo he borrado porque provoca un buen efecto (para quien le interese)
Académicamente me gustaría destacar la forma de usar los efectos "aleatoriamente"...
efectos[Math.floor(Math.random() * efectos.length)]();
... se trata de un array de funciones, y se activan simplemente poniendo () detrás de el elemento del array...
Pues eso: Si alguien encuentra la forma de que funcione en mozilla le agradecería la info...
y si quieren poner más efectos ¡yabadabadú...!
Saludos
