jquery 动态数字滚动
1、引入jQuery
<script src="js/jquery.min.js"></script>
2、html
<div id="count">14</div>
3、js函数
(function($){ $.fn.numberRock=function(options){ var defaults={ lastNumber:100, //最终值 duration:2000, //时间 easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的) }; var opts=$.extend({}, defaults, options); $(this).animate({ num : "numberRock", // width : 300, // height : 300, },{ duration : opts.duration, easing : opts.easing, complete : function(){ console.log("success"); }, step : function(a,b){ //可以检测我们定时器的每一次变化 //console.log(a); //console.log(b.pos); //运动过程中的比例值(0~1) $(this).html(parseInt(b.pos * opts.lastNumber)); } }); } })(jQuery);
4、js代码
$(function(){
$("#counta").numberRock({
lastNumber:14,
duration:3000,
easing:'swing', //慢快慢
});
});
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了