デジタルスクロールカードnumberAnimate.jsの使用と効果の修正
1450 ワード
デジタルスクロールを実現する需要があって、きっとこのような効果のプラグインがたくさんあると思って、自分で車輪を作らないで、そこで、numberAnimate jsデジタルスクロールプラグインを探して、まだとても使いやすくて、とても簡単で、ちょうど需要に合います.
コードは次のとおりです.
所望の効果は時間に1を加える効果で、実現することができますが、小さな
上図では85行目の
また、数字の大きさを変えるには、修正が必要な
コードは次のとおりです.
, :
$(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.css
のheight、width、
の割合を把握する必要があります.