Acceder a los elementos Html desde Javascript

merecumbe · #1 (**permalink**) 19/11/2012, 14:16

Hola a todos. Quisiera preguntarles tengo el siguiente array en java script

fotos= ["<img src='img1' />",
"<img src='img2' />",
"<img src='img3' />",
"<img src='img4' />",
"<img src='img5' />",
"<img src='img6' />",
"<img src='img7' />"];

el cual por medio de document.getElementById("imagenes").innerHTML = fotos[numFoto]; las voy ingresando a un div con id imagenes.

y realizo una animacion en css3 de que cuando se agrege la foto aparezca con una animacion

por ejemplo

.img{
-webkit-animation-name:animacion_2;
-webkit-animation-duration:5s;
}

@-webkit-keyframes animacion_2{
0%{
opacity:0;
}
100%{
opacity:100%;
}
}

Como podria yo decirle a ajavascript que a cada imagen de ese array cuando aparezca le aplique el estilo css de animacion

Gracias por su ayuda

andrexsos17 · #2 (**permalink**) 19/11/2012, 14:43

Hola puedes utilizar algo como esto

Código Javascript:

Ver originaldocument.getElementById('Elemento').className = 'clase'

Para mayor info guiate de esta pagina

Saludos

emprear · #3 (**permalink**) 19/11/2012, 16:22

En realidad no me queda claro si ese array de imágenes lo estás cargando dinamicamente a un intervalo de tiempo

Esta script combina rotación + animación

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Rotar imagen + efecto</title>
<style type='text/css'>
@-webkit-keyframes animacion_3{
0% {-webkit-opacity:0;}
100% {-webkit-opacity:100%;}
 }
@-moz-keyframes animacion_3{
0% {opacity:0;}
100% {opacity:100%;}
 }
</style>
<script type='text/javascript'>
//<![CDATA[ 
var t;
var fondos = 
[
'<img src="http://foros.emprear.com/javascript/rotar_bg/tabla_html.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/sfondo05.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/sfondo06.jpg" alt="" onload="animar(this)" width="200" height="200" \/>',
'<img src="http://foros.emprear.com/javascript/rotar_bg/fowd-404.jpg" alt="" onload="animar(this)" width="200" height="200" \/>'
];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var rotar =fondo_actual++;
document.getElementById('ani').innerHTML =  fondos[rotar];
}
 
function animar(laimagen){
laimagen.style.setProperty("-webkit-animation", "animacion_3 5s");
laimagen.style.setProperty("-moz-animation", "animacion_3 5s");
}
 
t = window.setInterval(CambiarFondo, 5000); 
 
//]]>  
</script>
</head>
<body>
<div id="ani">
<img src="http://foros.emprear.com/javascript/rotar_bg/fowd-404.jpg" width="200" height="200" alt="" onload="animar(this);" />
</div>
</body>
</html>

En efectos como este siempre es recomendable que precargues las imágenes

Saludos

rosonator · #4 (**permalink**) 20/11/2012, 04:24

SI no te funciona así por qué no pruebas a crear los elementos img en JS y a emparentarlos con tuDiv.appendChildren(tuImagen1)?, así en tu array solo necesitarás guardar la ruta de tus imágenes.

merecumbe · #5 (**permalink**) 20/11/2012, 21:36

Gracias pero ya lo habia intentado asi y no funciona

Diego89 · #6 (**permalink**) 21/11/2012, 11:51

Espero que te sea de ayuda http://tinkerbin.com/zRFeoeS4

Código HTML:

Ver original<div id="contador"></div>

Código CSS:

Ver original.img{
-webkit-animation-name:animacion_2;
-webkit-animation-duration:5s;
}
 
@-webkit-keyframes animacion_2{
0%{
opacity:0;
}
100%{
opacity:100%; 
}
}

Código Javascript:

Ver originalvar images = ['http://farm9.staticflickr.com/8342/8201143175_803ffefd17_m.jpg', 'http://farm9.staticflickr.com/8208/8202248574_cb220be335_m.jpg','http://farm9.staticflickr.com/8200/8203901281_3043fcd663_m.jpg']
var $contador = document.getElementById('contador');
var contador = 1;
    
for( var i = 0; i < images.length; i++ ) {
    var img = new Image();
    img.onload = addClass( img );
    img.src = images[i];  
}
 
function addClass( img ) {
    img.className = "img";
    $contador.innerHTML = "Imágenes cargadas: " + contador++;
    document.body.appendChild( img );
}