Beispiel für die Implementierung einer preisgekrönten nahtlosen Scroll-Animation für ein HTML5-Mobilterminal

In diesem Artikel wird das Implementierungsbeispiel der preisgekrönten nahtlosen Scroll-Animation auf dem Html5-Mobilterminal vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Bedarfsanalyse

Haha, es ist sofort nach dem Hochladen des dynamischen Bildes wirklich klar.

Es rollt, rollt, also wie macht man das? Fassen wir zusammen:

Eigentlich ist es ganz einfach. Das äußerste <div> wird als festes Fenster verwendet, das innere <ul> steuert die Bewegung und das innere <li> zeigt Animationen an.

 <div class=roll id=roll> <ul> <li>Die erste Struktur</li> <li>Die zweite Struktur</li> <li>Die dritte Struktur</li> <li>Die vierte Struktur</ li> <li>Die fünfte Struktur</li> <li>Die sechste Struktur</li> <li>Die siebte Struktur</li> <li>Die achte Struktur</li> </ul></div>

Implementieren Sie zunächst den grundlegenden CSS-Stil

 *{ margin:0; padding:0;}.roll{ margin: 100px auto; width: 40px; overflow:hidden;}.roll ul{ list-style: none;} roll li{ line-height:20px; font-size:14px;}

Sie können einen Blick auf den allgemeinen Stil werfen:

animate()-Methode

$(selector).animate(styles,speed,easing,callback)

Parameter:

Stile: erforderlicher Parameter, CSS-Stil, der animiert werden muss (Benennung in Kamel-Schreibweise verwenden)

Geschwindigkeit: Gibt die Geschwindigkeit der Animation an

@Nummer:1000(ms)

@string:langsam,normal,schnell

Lockerung: Animationsgeschwindigkeit (Swing, linear)

Rückruf: Rückruffunktion, nachdem die Funktion ausgeführt wurde

 $(document).ready(function(){ setInterval(function(){ // Einen Timer zum Konvertieren alle 1,5 Sekunden hinzufügen $(#roll).find(ul:first).animate({ marginTop:-40px // The Abstand jeder Bewegung},500,function(){ //Die Zeit der Animationsbewegung//$(this) bezieht sich auf das ul-Objekt, //Nachdem ul zurückgesetzt wurde, fügen Sie das erste und zweite Element //an der Position des letzten Elements von ul ein $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this },1500) });

Schauen Sie sich den Effekt an:

Durch Schlüsselbilder in CSS3 können Sie den Effekt des Schrittüberspringens erzielen. Werfen wir zunächst einen kurzen Blick auf die Idee.

1. Wenn es sich um eine hartcodierte Auszeichnung handelt, müssen Sie die vordere nach der anderen kopieren. Wenn sie einzeln gewürfelt wird, kopieren Sie die erste. Wenn sie zwei Mal gewürfelt wird, kopieren Sie die erste und die zweite . individuell.

 <div class=roll id=roll> <ul> <li>Die erste Struktur</li> <li>Die zweite Struktur</li> <li>Die dritte Struktur</li> <li>Die vierte Struktur</ li> <li>Die fünfte Struktur</li> <li>Die sechste Struktur</li> <li>Die siebte Struktur</li> <li>Die achte Struktur</li> <li>Erste Struktur</li > <li>Zweite Struktur</li> </ul></div>

2. Berechnen Sie dann, wie oft und wie viele Sekunden gleichzeitig gescrollt werden muss. Das Beispiel sind zwei Scrolls, die 5 Sekunden dauern, sodass die Animationszeit von CSS3 5 Sekunden beträgt. In wie viele Teile muss @keyframe unterteilt werden? Da es sich um eine Pause handelt, sind für jede Schriftrolle zwei Kopien erforderlich, und die letzte Schriftrolle muss springen, sodass nur eine Kopie vorhanden ist. Es werden also 5 * 2 - 1 = 9 Kopien benötigt. Sie können es anhand des Codes erkennen:

 /*Hier erfolgt keine Kompatibilitätsverarbeitung*/.roll ul{ list-style: none; Animation: ani 5s linear unlimited; /*Animation ani, 5s, wird mit konstanter Geschwindigkeit in einer Schleife abgespielt*/}@keyframes ani{ 0 %{ margin-top: 0; } 12,5%{ margin-top: 0; } 25%{ margin-top: -40px; } 50 %{ margin-top: -80px } 75 %{ margin-top: -120px } 100 %{ margin- top: -160px; /*Der letzte ist einer, der die Animation unterbrechen kann*/ }}

Wenn die Zahl unsicher ist, müssen Sie sie dynamisch berechnen und mit js dynamisch @keyframes hinzufügen. Zu diesem Zeitpunkt ist es in Ordnung, solange Sie das Intervall und die Bewegungsentfernung berechnen können.

1. Ermitteln Sie zunächst die Länge von <li>

2. Berechnen Sie dann den Intervallprozentsatz. Da es eine Pause gibt, denken Sie daran, die Anzahl der Sekunden × 2 zu verwenden

3. Verwenden Sie dann eine Zeichenfolge, um @keyframes, 0 ~ Länge, einschließlich Länge zu buchstabieren, da es noch eine gibt, gerade Zahlen und ungerade Zahlen werden getrennt.

4. Klonen Sie das erste und das zweite Wort in <ul> bis zum Ende von <ul>

5. Erstellen Sie ein <style>-Tag und fügen Sie es zu <head> hinzu

6. Fügen Sie <ul> Animationsattribute hinzu

Lassen Sie uns ohne weitere Umschweife über den Code sprechen:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Die Länge des ul-Objekts abrufen = $(#roll li).length, //Die Länge des li-Arrays abrufen per = 100 / (length / 2 * 2 ) ; / /Berechnen Sie den Prozentsatz der Zwischenintervalle//Strings verketten var keyframes = `/ @keyframes ani{` for(var i = 0; i<=length; i++){ keyframes+=`${i * per}%{ margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}keyframes+='}'; li:first), //Erstes Element abrufen liSec = liFirst.next(); //Das zweite Element abrufen ulObj.append(liFirst.clone()).append(liSec.clone()); //Die beiden Elemente in ul einfügen $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Erstelle ein Style-Tag, um Keyframes in den Kopf einzufügen ulObj.css(animation,ani 5s linear infinite); // CSS3-Animation zu ul hinzufügen} addKeyFrame();

Zepto verfügt auf der mobilen Seite nicht über eine Animationsfunktion, wenn Sie keine CSS3-Attribute verwenden. Wie können Sie sie dann in JS schreiben?

 var timer,top;function roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //Den ersten und zweiten zum <ul>-Tag hinzufügen clearInterval(timer); timer = setInterval(function(){ //Setze den Timer var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Erhalte die aktuelle Höhe, wenn sie nicht am Ende ist, nach oben verschieben -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //Wenn es das Ende erreicht, wird es schnell Null erreichen top = 0; {-webkit- Transition:none,transition:none,margin-top:top}); setTimeout(function(){ //Hier einen Verzögerer hinzufügen, der am Ende der Warteschlange ausgeführt werden sollte, um zu verhindern, dass die beiden Animationen zusammengeführt werden top -= ulObj.css({-webkit-transition:all 1s,transition:all 1s, margin-top :top}); },0) } },2000);}roll();

Wenn es einen anderen Weg gibt, werde ich es beim nächsten Mal von Zeit zu Zeit aktualisieren. Aber für Mobilgeräte sollten diese ausreichen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.