Bildwechsel auf schwebt von einer genähten Bild

Question

ich ein Bild, das 4 Bilder erstellt wird in einem See this image

Jetzt hat, was ich versuche, die CSS zu laden gerade den ersten Platz an der Spitze zu tun ist, erhalten . Wenn ein Benutzer das Bild überfliegt, wechselt es zwischen allen vier Bildern.

So wird bei Belastung schwarz angezeigt, wenn ein Benutzer darüber schwebt, ändert sich das Bild in rot, dann blau, dann grün und dann wieder schwarz. Es wiederholt sich dann immer wieder, bis die Maus aus dem Bildbereich bewegt wird.

Ich weiß, dass ich dies tun kann, indem Sie die PNG in ein gif konvertieren, aber das Bild wird außerhalb meiner Kontrolle generiert, so dass diese Methode benötigt wird. Wenn jemand helfen kann, werde ich für immer dankbar sein.

Prost.

Answer 1

sollten Sie CSS sprites verwenden und die Änderung geschieht zu machen, wenn sie über die Verwendung setInterval-Funktion Position ändern (hier die Höhe jeden Block des Bild mesures 300px, so dass wir incerement von +300) jedes definierten Zeitintervall,

Unter Snippet habe ich .hover() jquery Funktion verwendet, um Annimierung festzulegen und zu löschen.

var interval; 
 
$(function(){ 
 
    $("#image").hover( 
 
     function() { 
 
     var bottom = 0; 
 
     $this = $(this); 
 
     interval = setInterval(function() { 
 
      
 
      bottom >= 900 ? bottom = 0 : bottom+=300; 
 
      
 
      $this.css({'background-position' : '0px -'+bottom+'px'}); 
 
     } , 1000) 
 
     
 
     }, 
 
     function(){ 
 
     $this.css({'background-position' : '0 0'}) 
 
     clearInterval(interval); 
 
     } 
 
); 
 
});

#image { 
 
    width:150px; 
 
    height:150px; 
 
    background: url('https://i.stack.imgur.com/h8h14.png') 0 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image" ><div>