jQuery New Number是一個(gè)非常好用的jQuery插件,它可以實(shí)現(xiàn)數(shù)字滾動(dòng)效果。數(shù)字滾動(dòng)效果在很多的網(wǎng)站中都有應(yīng)用,比如熱門商品展示、倒計(jì)時(shí)等。
使用jQuery New Number非常簡單,只需要引入jQuery庫和New Number插件的js文件即可。然后通過JavaScript代碼,選擇要滾動(dòng)數(shù)字的元素,設(shè)置起始數(shù)字和結(jié)束數(shù)字,指定滾動(dòng)時(shí)間和滾動(dòng)方式。下面是一個(gè)使用jQuery New Number實(shí)現(xiàn)數(shù)字滾動(dòng)的例子:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="jquery.new-number.js"></script> <script> $(function() { $(".number").newNumber({ start: 0, // 起始數(shù)字 end: 1000, // 結(jié)束數(shù)字 duration: 3000, // 滾動(dòng)時(shí)間 easing: "linear" // 滾動(dòng)方式 }); }); </script> <div class="number"></div>
上面的例子中,我們選擇了class為number的div元素,并使用newNumber方法,將起始數(shù)字設(shè)置為0,結(jié)束數(shù)字設(shè)置為1000,滾動(dòng)時(shí)間設(shè)置為3秒,滾動(dòng)方式設(shè)置為線性。最后我們在div元素中顯示了滾動(dòng)數(shù)字的效果。
jQuery New Number插件也提供了其他的滾動(dòng)方式,比如easeOutQuad、easeOutCubic等,具體可以查看插件的官方文檔。
總的來說,jQuery New Number插件非常方便實(shí)用,可以為我們的網(wǎng)站增加不少的動(dòng)態(tài)效果,為用戶帶來更好的體驗(yàn)。