數字滾動插件numberAnimate.js的使用及效果修改

fuyi501 發布于2019-08-23 11:49 / 1299人閱讀

摘要：有個實現數字滾動的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個數字滾動插件，還挺好用，很簡單，剛好符合需求。另外，提示一句，改變數字的字號大小，需要修改的中的字號的比例要把握好，一不小心就壞了，呵呵，親身體會

有個實現數字滾動的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個numberAnimate js數字滾動插件，還挺好用，很簡單，剛好符合需求。

代碼如下：



    
        
        數字滾動插件
        
    
    
    無分隔符，無小數點：

想要的效果是過一段時間加1的效果，可以實現，但是有個小小的bug，那就是，比如說，個位數字加到9時進一位然后該位上為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、字號的比例要把握好，一不小心就壞了，呵呵，親身體會 -_-||

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97533.html

前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

li21 2019-08-23 17:11 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

AaronYuan 2019-07-31 10:21 評論0 收藏0
原生js滾動到底部加載數據和下拉刷新 Scrollload

摘要：原文地址初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多站點也會有這樣的需求，比如百度首頁就有。原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多pc站點也會有這樣的需求，比如百度首頁...

HollisChuang 2019-08-20 13:34 評論0 收藏0