成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

數(shù)字滾動(dòng)插件numberAnimate.js的使用及效果修改

fuyi501 / 1312人閱讀

摘要：有個(gè)實(shí)現(xiàn)數(shù)字滾動(dòng)的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個(gè)數(shù)字滾動(dòng)插件，還挺好用，很簡(jiǎn)單，剛好符合需求。另外，提示一句，改變數(shù)字的字號(hào)大小，需要修改的中的字號(hào)的比例要把握好，一不小心就壞了，呵呵，親身體會(huì)

有個(gè)實(shí)現(xiàn)數(shù)字滾動(dòng)的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個(gè)numberAnimate js數(shù)字滾動(dòng)插件，還挺好用，很簡(jiǎn)單，剛好符合需求。

代碼如下：



    
        
        數(shù)字滾動(dòng)插件
        
    
    
    無(wú)分隔符，無(wú)小數(shù)點(diǎn)：

想要的效果是過(guò)一段時(shí)間加1的效果，可以實(shí)現(xiàn)，但是有個(gè)小小的bug，那就是，比如說(shuō)，個(gè)位數(shù)字加到9時(shí)進(jìn)一位然后該位上為0，問(wèn)題來(lái)了，這里0的數(shù)字卻滾動(dòng)不出來(lái)，直接到了下一個(gè)時(shí)間間隔時(shí)滾動(dòng)到了11，調(diào)試了很久發(fā)現(xiàn)，是numberAnimate.js中，第85行的判斷條件有問(wèn)題，注釋掉該if判斷就好了，如下圖：

上圖中，第85行的$(this).css("top")一直都是0px，而第84行計(jì)算獲取到的thisTop 在數(shù)字滾到到0 時(shí)值為0px，所以導(dǎo)致直接跳過(guò)了判斷，沒(méi)有執(zhí)行到transform動(dòng)畫(huà)那里，所以少了0的效果，導(dǎo)致看起來(lái)的效果就是9直接跳到了11，沒(méi)有10。

另外，提示一句，改變數(shù)字的字號(hào)大小，需要修改的numberAnimate.css中的height、width、字號(hào)的比例要把握好，一不小心就壞了，呵呵，親身體會(huì) -_-||

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97533.html

相關(guān)文章

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

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    li21 評(píng)論0 收藏0

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

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    AaronYuan 評(píng)論0 收藏0

  • 原生js滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新 Scrollload

    摘要：原文地址初衷如今移動(dòng)端站點(diǎn)越來(lái)越多，滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見(jiàn)，即使現(xiàn)在很多站點(diǎn)也會(huì)有這樣的需求，比如百度首頁(yè)就有。 原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷 如今移動(dòng)端站點(diǎn)越來(lái)越多，滾動(dòng)到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見(jiàn)，即使現(xiàn)在很多pc站點(diǎn)也會(huì)有這樣的需求，比如百度首頁(yè)...

    HollisChuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<