デジタルスクロールカードnumberAnimate.jsの使用と効果の修正


デジタルスクロールを実現する需要があって、きっとこのような効果のプラグインがたくさんあると思って、自分で車輪を作らないで、そこで、numberAnimate jsデジタルスクロールプラグインを探して、まだとても使いやすくて、とても簡単で、ちょうど需要に合います.
コードは次のとおりです. , :

$(function(){ // var numRun = $(".numberRun").numberAnimate({num:'1553093', speed:1000}); // 1 , var nums = 1553093; setInterval(function(){ nums+= 1; numRun.resetData(nums); },2000); })

所望の効果は時間に1を加える効果で、実現することができますが、小さなbugがあります.それは、例えば、9時に1桁を追加して、その桁を0にします.問題が来ました.ここでは0の数字はスクロールできません.直接次の時間間隔になったときに11にスクロールしました.長い間デバッグしていましたが、numberAnimate.jsの中で、85行目の判断条件に問題がある場合は、そのif判断を注記すればよい.
上図では85行目の$(this).css("top")0pxであったのに対し、84行目の計算で得られたthisTopは数字が0にスクロールした時点で0pxとなったため、判断を直接スキップし、transformアニメーションには実行されなかったため、0の効果が少なく、9が11に直接ジャンプし、10がないように見えた.
また、数字の大きさを変えるには、修正が必要なnumberAnimate.cssheight、width、 の割合を把握する必要があります.