使用前先引入jquery-1.11.0.min.js,引入jquery.numscrool.js文件
<!--数字增长累加动画-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
页面中如下结构
<div class="shu1">58446</div>
<div class="shu2">25487</div>
<div class="shu3">42342</div>
<div class="shu4">34542</div>
<div class="shu5">33215</div>
<div class="shu6">33215</div>
创建numscroll对象:
<script type="text/javascript">
$(".shu1").numScroll();
$(".shu2").numScroll();
$(".shu3").numScroll();
$(".shu4").numScroll();
$(".shu5").numScroll();
$(".shu6").numScroll();
</script>
下载地址
https://github.com/chaorenzeng/jquery.numscroll.js.git
下面是jquery.numscroll.js插件源码:
/*!
jquery.numscroll.js -- 数字滚动累加动画插件 (Digital rolling cumulative animation)
version 1.0.0
2018-09-22
author: KevinTseng < 921435247@qq.com@qq.com >
文档: https://github.com/chaorenzeng/jquery.numscroll.js.git
QQ交流群: 739574382
/
(function($) {
function isInt(num) {
//作用:是否为整数
//返回:true是 false否
var res = false;
try {
if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
res = parseInt(num) % 1 === 0 ? true : false;
}
} catch(e) {
res = false;
}
return res;
}
function isFloat(num) {
//作用:是否为小数
//返回:小数位数(-1不是小数)
var res = -1;
try {
if(String(num).indexOf(".") != -1) {
var index = String(num).indexOf(".") + 1; //获取小数点的位置
var count = String(num).length - index; //获取小数点后的个数
if(index > 0) {
res = count;
}
}
} catch(e) {
res = -1;
}
return res;
}
$.fn.numScroll = function(options) {
var settings = $.extend({
'time': 1500,
'delay': 0
}, options);
return this.each(function() {
var $this = $(this);
var $settings = settings;
var num = $this.attr("data-num") || $this.text(); //实际值
var temp = 0; //初始值
$this.text(temp);
var numIsInt = isInt(num);
var numIsFloat = isFloat(num);
var step = (num / $settings.time) 10; //步长
setTimeout(function() {
var numScroll = setInterval(function() {
if(numIsInt) {
$this.text(Math.floor(temp));
} else if(numIsFloat != -1) {
$this.text(temp.toFixed(numIsFloat));
} else {
$this.text(num);
clearInterval(numScroll);
return;
}
temp += step;
if(temp > num) {
$this.text(num);
clearInterval(numScroll);
}
}, 1);
}, $settings.delay);
});
};
})(jQuery);
发表评论 取消回复