2011-10-05 23 views
5

Qual è il modo migliore per emulare una rotella della roulette in HTML5?Immagine della ruota di rotazione in HTML5 (ad esempio, la ruota della roulette)?

La rotazione della ruota deve essere controllabile da alcuni input (ad esempio, velocità di rotazione basata su alcuni input dell'utente). Le etichette delle ruote dovrebbero sfocarsi mentre la ruota gira velocemente, ma con il rallentamento della rotazione, le etichette sulla ruota diventano sempre più leggibili.

Ci sono librerie HTML5 che supportano questo o le animazioni devono essere programmate a mano?

Anche questo deve essere supportato su dispositivi iOS.

risposta

14

Si può fare in poche righe di CSS.

La sfocatura è un effetto ottico, non necessita di essere simulato.

+1

Grazie! Una domanda che non abbiamo chiesto, però, era qual è il modo migliore per determinare su quale numero è "atterrato"? C'è un modo semplice per farlo? Un approccio che possiamo pensare è quello di mantenere la ruota ferma e fare girare un puntatore all'interno della ruota. Sulla base di come atterra il puntatore, possiamo determinare su quale numero è atterrato. Non ideale, ma sarebbe funzionale. – Crashalot

+1

Se il puntatore è zero gradi a nord della ruota e un angolo di sezione numerica equivale, ad esempio, a 10 gradi, quindi se si ruota la ruota di 400 gradi si punta al 4 ° numero ('(400 - 360)/10') . – katspaugh

6

Se qualcuno è interessato a farlo utilizzando la tela JavaScript e HTML5, vedere http://www.dougtesting.net/winwheel/index.html per un esempio. La cosa interessante è che il codice è disponibile anche per il download.

+0

Questa è una grande demo. Potrebbe essere utile fornire uno snippet da questo qui nel caso in cui tu sposti o elimini quella pagina demo in futuro. – Marvo

+3

Benvenuti in Stack Overflow! Grazie per aver postato la tua risposta! Assicurati di leggere attentamente [FAQ sulla promozione di sé] (http://stackoverflow.com/faq#promotion). Si noti inoltre che * è * richiesto * di pubblicare un disclaimer ogni volta che si collega al proprio sito/prodotto. –