数字滚动
大约 4 分钟
数字滚动
1、利用jquery.animate()做数字滚动
$({count:"10"}).animate({count:"100"},{duration:2000,step:function(){
console.log(this.count)
}});
animate语法
(selector).animate({stles},{options})
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
2、利用写好的插件,依耐jquery.js
(function ($) {
$.fn.animationCounter = function (options) {
return this.each(function () {
try {
var element = $(this);
var defaults = {
start: 0,//开始的数字
end: null,//结束的数字
step: 1,//步长
delay: 1000,//并不是总时间,总时间 = (end/stp) * delay
xiaoshu: -1,//小数位数
txt: ""
}
var settings = $.extend(defaults, options || {})
var nb_start = settings.start;
var nb_end = settings.end;
var nb_xiaoshu = settings.xiaoshu;
element.text(nb_start + settings.txt);
var counter = function () {
// Definition of conditions of arrest
if (nb_end != null && nb_start >= nb_end) {
return;
}
// incrementation
nb_start = nb_start + settings.step;
// display
if (nb_xiaoshu == 2) {
nb_start = Number(nb_start.toFixed(2));
if ((nb_start / 100) > 1) {
if(nb_start >= settings.end){
nb_start = settings.end
}
let nb1 = nb_start.toString().split("")
nb1.splice(-2, 0, ".")
element.text(nb1.join(""))
}
else {
if(nb_start >= settings.end){
nb_start = settings.end
}
element.text(nb_start + settings.txt);
}
} else {
if (nb_xiaoshu == 1) {
nb_start = Number(nb_start.toFixed(1));
}
// 对超过1000的数字进行处理,添加一个逗号
if ((nb_start / 1000) > 1) {
if(nb_start >= settings.end){
nb_start = settings.end
}
let nb1 = nb_start.toString().split("")
nb1.splice(-3, 0, ",")
element.text(nb1.join(""))
}
else {
if(nb_start >= settings.end){
nb_start = settings.end
}
element.text(nb_start + settings.txt);
}
}
}
// Timer
// Launches every "settings.delay"
setInterval(counter, settings.delay);
} catch (e) {
alert(e + ' at line ' + e.lineNumber);
}
});
};
})(jQuery);
使用方法:
var number1 = $('.number1').animationCounter({
start: 0,
step: 50,
delay:60,
end:1034,
xiaoshu:2,
});
本插件并不完善,还需更改
3、油盘数字滚动类插件
/*
* @filename numberAnimate.js
* @author fy[2016-9-18 17:09:00]
* @update fy[2019-4-9 16:22:00]
* @version v1.1
* @description 页面数字滚动插件
* @基于jquery
*/
;
(function ($) {
$.fn.numberAnimate = function (setting) {
var defaults = {
speed: 1000, //动画速度
num: "", //初始化值
iniAnimate: true, //是否要初始化动画效果
symbol: '', //默认的分割符号,千,万,千万
dot: 0, //保留几位小数点
pst: "" //是否有 百分号
}
//如果setting为空,就取default的值
var setting = $.extend(defaults, setting);
//如果对象有多个,提示出错
if ($(this).length > 1) {
alert("just only one obj!");
return;
}
//如果未设置初始化值。提示出错
if (setting.num == "") {
alert("must set a num!");
return;
}
var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\
<span class="mt-number-animate-span">0</span>\
<span class="mt-number-animate-span">1</span>\
<span class="mt-number-animate-span">2</span>\
<span class="mt-number-animate-span">3</span>\
<span class="mt-number-animate-span">4</span>\
<span class="mt-number-animate-span">5</span>\
<span class="mt-number-animate-span">6</span>\
<span class="mt-number-animate-span">7</span>\
<span class="mt-number-animate-span">8</span>\
<span class="mt-number-animate-span">9</span>\
<span class="mt-number-animate-span">0</span>\
<span class="mt-number-animate-span">.</span>\
</div>';
//数字处理
var numToArr = function (num) {
num = parseFloat(num).toFixed(setting.dot);
if (typeof (num) == 'number') {
var arrStr = num.toString().split("");
} else {
var arrStr = num.split("");
}
//console.log(arrStr);
return arrStr;
}
//设置DOM symbol:分割符号
var setNumDom = function (arrStr) {
var shtml = '<div class="mt-number-animate">';
for (var i = 0, len = arrStr.length; i < len; i++) {
if (i != 0 && (len - i) % 3 == 0 && setting.symbol != "" && arrStr[i] != ".") {
shtml += '<div class="mt-number-animate-dot">' + setting.symbol + '</div>' + nHtml.replace("{{num}}", arrStr[i]);
} else {
shtml += nHtml.replace("{{num}}", arrStr[i]);
}
}
if (setting.pst) {
shtml += '%</div>';
} else {
shtml += '</div>';
}
return shtml;
}
//执行动画
var runAnimate = function ($parent) {
$parent.find(".mt-number-animate-dom").each(function () {
var num = $(this).attr("data-num");
// console.log(num)
num = (num == "." ? 11 : num == 0 ? 10 : num);
var spanHei = $(this).height() / 12; //11为元素个数
var thisTop = -num * spanHei + "px";
if (thisTop != $(this).css("top")) {
if (setting.iniAnimate) {
//HTML5不支持
if (!window.applicationCache) {
$(this).animate({
top: thisTop
}, setting.speed);
} else {
$(this).css({
'transform': 'translateY(' + thisTop + ')',
'-ms-transform': 'translateY(' + thisTop + ')',
/* IE 9 */
'-moz-transform': 'translateY(' + thisTop + ')',
/* Firefox */
'-webkit-transform': 'translateY(' + thisTop + ')',
/* Safari 和 Chrome */
'-o-transform': 'translateY(' + thisTop + ')',
'-ms-transition': setting.speed / 1000 + 's',
'-moz-transition': setting.speed / 1000 + 's',
'-webkit-transition': setting.speed / 1000 + 's',
'-o-transition': setting.speed / 1000 + 's',
'transition': setting.speed / 1000 + 's'
});
}
} else {
setting.iniAnimate = true;
$(this).css({
top: thisTop
});
}
}
});
}
//初始化
var init = function ($parent) {
//初始化
$parent.html(setNumDom(numToArr(setting.num)));
runAnimate($parent);
};
//重置参数
this.resetData = function (num) {
var newArr = numToArr(num);
var $dom = $(this).find(".mt-number-animate-dom");
if ($dom.length < newArr.length) {
$(this).html(setNumDom(numToArr(num)));
} else {
$dom.each(function (index, el) {
$(this).attr("data-num", newArr[index]);
});
}
runAnimate($(this));
}
//init
init($(this));
return this;
}
})(jQuery);
使用方法:
var numRun1 = $(".numberRun1").numberAnimate({
num: 15342.10,
dot: 2,
speed: 2000,
symbol: ","
});
<script type="text/javascript">
$(function () {
//初始化
var numRun1 = $(".numberRun1").numberAnimate({
num: 15342.10,
dot: 2,
speed: 2000,
symbol: ","
});
var numRun2 = $(".numberRun2").numberAnimate({
num: '52353434',
speed: 2000,
symbol: ","
});
var numRun3 = $(".numberRun3").numberAnimate({
num: '523534.343',
dot: 3,
speed: 2000
});
var numRun4 = $(".numberRun4").numberAnimate({
num: '1553434',
speed: 2000
});
var numRun5 = $(".numberRun5").numberAnimate({
num: '42.21',
pst: "%",
dot: 2,
speed: 2000,
symbol: ","
});
var numRun6 = $(".numberRun6").numberAnimate({
num: 1,
dot: 2,
speed: 500
});
var nums1 = 15342.10;
setInterval(function () {
nums1 += 21.31;
numRun1.resetData(nums1);
}, 3000);
var nums2 = 52353434;
setInterval(function () {
nums2 += 3434;
numRun2.resetData(nums2);
}, 3800);
var nums3 = 523534.343;
setInterval(function () {
nums3 += 7454.521;
numRun3.resetData(nums3);
}, 4000);
var nums4 = 1553434;
setInterval(function () {
nums4 += 1254;
numRun4.resetData(nums4);
}, 3500);
var nums5 = 42.21;
setInterval(function () {
nums5 += 2.55;
console.log(nums5)
console.log(numRun5)
numRun5.resetData(nums5);
}, 2500);
var nums6 = 1;
setInterval(function () {
nums6 += 1;
// console.log(nums6)
// console.log(numRun6)
numRun6.resetData(nums6);
}, 1000);
})
</script>