php 滚动数字,jquery实现数字滚动特效

这次给大家带来jquery实现数字滚动特效，jquery实现数字滚动特效的注意事项有哪些，下面就是实战案例，一起来看一下。

有分隔符，有小数点：

只有分隔符：

只有小数点：

无分隔符，无小数点：

运行效果图：

具体代码如下

数字滚动插件

/*数字滚动插件的CSS可调整样式*/

.mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 36px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }

.mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}

.mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}

.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}

有分隔符，有小数点：

只有分隔符：

只有小数点：

无分隔符，无小数点：

/**

* by Mantou qq:676015863

* 数字滚动插件 v1.0

*/

;(function($) {

$.fn.numberAnimate = function(setting) {

var defaults = {

speed : 1000,//动画速度

num : "", //初始化值

iniAnimate : true, //是否要初始化动画效果

symbol : '',//默认的分割符号，千，万，千万

dot : 0 //保留几位小数点

}

//如果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 = '

\

0\

1\

2\

3\

4\

5\

6\

7\

8\

9\

.\

//数字处理

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 = '

';

for(var i=0,len=arrStr.length; i

if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){

shtml += '

'+setting.symbol+'

'+nHtml.replace("{{num}}",arrStr[i]);

}else{

shtml += nHtml.replace("{{num}}",arrStr[i]);

}

}

shtml += '

';

return shtml;

}

//执行动画

var runAnimate = function($parent){

$parent.find(".mt-number-animate-dom").each(function() {

var num = $(this).attr("data-num");

num = (num=="."?10:num);

var spanHei = $(this).height()/11; //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);

$(function(){

//初始化

var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","});

var nums = 15343242.10;

setInterval(function(){

nums+= 3433.24;

numRun.resetData(nums);

},3000);

var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","});

var nums2 = 15343242;

setInterval(function(){

nums2+= 1433;

numRun2.resetData(nums2);

},2000);

var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000});

var nums3 = 52353434.343;

setInterval(function(){

nums3+= 454.521;

numRun3.resetData(nums3);

},4000);

var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});

var nums4 = 52353434;

setInterval(function(){

nums4+= 123454;

numRun4.resetData(nums4);

},3500);

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：