目录
  1. 1. jQuery数字滚动效果
jQuery数字滚动效果

jQuery数字滚动效果

引入jQuery

1
<script src="js/jquery.min.js"></script>

body

1
2
<div id="count"></div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(function(){
$("#count").numberRock({
lastNumber:666, //终止数字
duration:800,
easing:'swing', //慢快慢
});
});
(function($){
$.fn.numberRock=function(options){
var defaults={
lastNumber:100,
duration:2000,
easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
};
var opts=$.extend({}, defaults, options);
$(this).animate({
num : "numberRock",
},{
duration : opts.duration,
easing : opts.easing,
complete : function(){
console.log("success");
},
step : function(a,b){ //可以检测我们定时器的每一次变化
$(this).html(parseInt(b.pos * opts.lastNumber));
}
});
}
})(jQuery);

www.foryh.com


文章作者: 艾小逗
文章链接: http://foryh.com/2018/09/03/jQuery数字滚动效果/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 艾小逗
打赏
  • 微信
  • 支付寶