这个功能比较简单 主要用作的后台管理系统的一些数据显示,可以用来装逼用 效果如下:
可以点击修改滚动的数字
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#count {
font-size: 50px;
font-weight: 700;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="count"></div>
<div id="count1"></div>
<div id="count2"></div>
<button id="BTN">修改</button>
<script>
$(function () {
$("#count").numberRock({
lastNumber: 8000, //终止数字
duration: 800,
easing: 'swing', //慢快慢
});
});
$(function () {
$("#count1").numberRock({
lastNumber: 100000, //终止数字
duration: 2000,
easing: 'linear', //慢快慢
});
});
$(function () {
$("#count2").numberRock({
lastNumber: 1500, //终止数字
fristNumber: 1000,
duration: 1000,
easing: 'linear', //慢快慢
});
});
(function ($) {
$.fn.numberRock = function (options) {
var defaults = {
fristNumber: '',
lastNumber: '',
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(opts.fristNumber + b.pos * (opts.lastNumber - opts.fristNumber)));
}
});
}
})(jQuery);
document.getElementById("BTN").onclick = function () {
$(function () {
$("#count2").numberRock({
lastNumber: 1600, //终止数字
fristNumber: 1500,
duration: 1000,
easing: 'linear', //慢快慢
});
});
}
</script>
</body>
</html>