Ver Mensaje Individual
  #3 (permalink)  
Antiguo 17/11/2013, 07:05
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 10 meses
Puntos: 206
Respuesta: LOOP DE IMAGEN en JAVASCRIPT

Pon una imagen como background de un div, repítela en el eje X, y mediante javascript modifica periódicamente el position del background sobre el eje x un poco. Si el incremento que le metas supera el ancho del width del div, no pasa nada, pero aconsejo acotarla dentro de un rango [0-width del div) para que no coja valores enormes si el script se ejecuta mucho tiempo.
http://jsfiddle.net/Zxj4e/

Código HTML:
Ver original
  1. <div id="img"></div>
Código CSS:
Ver original
  1. div#img { border:1px solid red; background-image:url(http://static3.wikia.nocookie.net/__cb20130516191344/mascotas/es/images/e/ea/PERROS.jpg); width:400px; height:300px; background-repeat:repeat-x; background-position:0px 0px; }
Código Javascript:
Ver original
  1. window.onload=function(){
  2.     var div=document.getElementById("img");
  3.     var pos=0;
  4.     setInterval(function(){
  5.         pos=(pos+3)%400;
  6.         div.style.backgroundPosition=pos+"px 0px";
  7.     },30);
  8. }