JavaScript
您现在的位置是:博客主页 > Web教程 > JavaScript

jquery数字滚动特效插件NumScroll,jquery.numscroll.js

By 钱伯斯 on JavaScript Time 2020-06-09 from:jquery.numscroll.js 1106人已围观
简介:    使用前先引入jquery-1.11.0.min.js,引入jquery.numscrool.js文件 <!--数字增长累加动画--> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
使用前先引入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);
相关文章
文章评论

( 0 )