CSS/Javascript Comment faire ce film dans Firefox comme dans IE7 +?

Question

<script language="javascript" > 
    var speed=25; //speed 
    var num=0; 
    var photos = document.getElementById('head_image'); 
    function scrollBG() { 
    num++; 
    photos.style.backgroundPosition="0"+num; 
    } 
    setInterval('scrollBG()',speed); 
</script> 

Ceci est le site en question: www.theorymarine.com

Answer 1

photos.style.backgroundPosition = "0" + num;

Vous avez besoin d'une unité pour les longueurs CSS.

photos.style.backgroundPosition= num+'px 0'; 

Vous préférez peut-être aussi baser votre animation sur le temps, de sorte que le taux se déplace ne dépend pas de la « vitesse » ou les performances du navigateur. par exemple:

<script type="text/javascript"> 
    var photos= document.getElementById('head_image'); 
    var begin= new Date().getTime(); 
    setInterval(function() { 
     var x= Math.floor((new Date().getTime()-begin)/25); 
     photos.style.backgroundPosition= x+'px 0'; 
    }, 25); 
</script>