滾動div內容像輪盤賭

我想創建一個輪盤賭，滾動一些數字和滾動顯示。
首先，我嘗試了圖片和backgroundOffset，但是它太落後了，並且在檢查卷號時出現問題。所以我做了該代碼：滾動div內容像輪盤賭

<div class="container" style="display: flex"> 
    <div class="block red">1</div> 
    <div class="block black">14</div> 
    <div class="block red">2</div> 
    <div class="block black">13</div> 
    <div class="block red">3</div> 
    <div class="block black">12</div> 
    <div class="block red">4</div> 
    <div class="block green">0</div> 
    <div class="block black">11</div> 
    <div class="block red">5</div> 
    <div class="block black">10</div> 
    <div class="block red">6</div> 
    <div class="block black">9</div> 
    <div class="block red">7</div> 
    <div class="block black">8</div> 

</div>

JSFIDDLE

我怎樣才能讓這個卷狀here？

來源

2015-12-26 zqk

使用畫布API是最有效的方式來爲對象創建動畫效果，特別是在製作遊戲時。因爲這樣做與div效率較低，導致更糟糕的表現。同樣使用畫布API，您可以使用更多工具來廉價地重新繪製和重新生成對象，並且還可以獲得更多花哨的外觀，而無需付出巨大的性能下降。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

除了非常簡單的動畫之外，也不要使用setInterval。
setInterval不會等到上一個動畫結束，這意味着在某些情況下，在較弱的機器上，您可以同時運行多個間隔！而且你也無法控制動畫。

在動畫對象HTML5遊戲開發標準的方法是使用requestAnimationFrame（）函數： https://developer.mozilla.org/pl/docs/Web/API/Window/requestAnimationFrame

來源

2015-12-26 22:19:02 Jazzman

滾動div內容像輪盤賭

回答

相關問題