Wie mache ich eine Nummer Radschleife?

8

Ich habe ein Zufallszahlenrad von 0 bis 9. Das Rad dreht sich nach oben oder unten, um auf der Zufallszahl zu landen. Wie kann ich es so machen, dass das Rad nur abrollt? (Sobald es 9 erreicht, ist die nächste Zahl 0, 1, 2 ... 9, 0, 1, 2) ohne viele divs zu haben.

%Vor% %Vor% %Vor%
    
4castle 15.01.2017, 07:03
quelle

3 Antworten

4

Ich habe Ihr Snippet ein wenig modifiziert, um das von Ihnen geforderte Verhalten zu erreichen.

Es gibt jedoch zwei Probleme. Zuerst brauchst du fast doppelt so viele Divs, um das Ding richtig zu animieren. Zweitens wird das transitionend -Ereignis nicht in allen Browsern unterstützt , und manchmal muss es vorangestellt werden, wenn Sie es interessieren unterstützende Dinge wie IE & lt; 10, dann wird es nicht für Sie aus der Box funktionieren.

Bearbeiten

Wie in der anderen Antwort anstelle der Verwendung von transitionend event vorgeschlagen, können Sie in Erwägung ziehen, nur die "Rad" -Position zurückzusetzen wenn die Schaltfläche angeklickt wird. Dies ist in Ordnung, aber es wird eine etwas ausgefeiltere Implementierung erfordern, da Sie sich (irgendwie) merken müssen, auf welche Position Sie zurücksetzen müssen.

%Vor% %Vor% %Vor%
    
Tomasz Lenarcik 15.01.2017, 08:08
quelle
1

Eine Lösung, die Sie tun können, ist, jedes div nach jedem Drücken der Taste nach oben zu verschieben, so dass es immer nach unten scrollen muss, um die nächste Nummer zu erhalten. Hier ist ein modularer Weg, es zu tun:

%Vor% %Vor% %Vor%
    
4castle 15.01.2017 09:13
quelle
0

%Vor% %Vor% %Vor%

Kauft dieses JsFiddle

aus

Hauptpunkt ist, das vorherige Element auf das letzte

zu setzen

Etwas spät, aber ich hoffe, dass dir das weiterhilft.

    
Arun Sharma 15.01.2017 09:21
quelle

Tags und Links