jquery 数字滚动特效 数字自增特效 数字位数动态适应
最近做了个大项目，需要在首页动画显示实时统计数据，虽然百度了不少jquery特效，但有的需要积分，有的功能不全面，下面我将源码分享出来。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery自定义数字滚动插件 </title>
<!--优先使用 IE 最新版本和 Chrome-->
<link href="css/globle.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/num.js"></script>
</head>
<body>
<div id="dataNums" style="padding:0px;margin:0 0;">
</div>
<script type="text/javascript" src="${ctxStatic }/plus/animateNumber/js/num.js"></script>
<script type="text/javascript">
function magic_number(str) {
var size = str.length;
$("#dataNums").rollNumDaq({
deVal:str,
digit:size
});
};
function update() {
$.getJSON("${pageContext.request.contextPath}/a/account/getAccount", function(data) {
magic_number(data.toString());
});
};
update();
setInterval(update, 1000*60*1);
</script>
</body>
</html>
num.js
//数字滚动 ;(function($, window, document) { "use strict"; var defaults = { deVal: 0, //传入值 className:'dataNums', //样式名称 digit:'' //默认显示几位数字 }; function rollNumDaq(obj, options){ this.obj = obj; this.options = $.extend(defaults, options); this.init = function(){ this.initHtml(obj,defaults); } } rollNumDaq.prototype = { initHtml: function(obj,options){ var strHtml = '<ul class="' + options.className + ' inrow">'; var valLen = options.digit || (options.deVal + '').length; if(obj.find('.'+options.className).length <= 0){ for(var i = 0; i< valLen; i++){ strHtml += '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span></div></div></li>'; } strHtml += '</ul>'; obj.html(strHtml); }else{ var thislen = $('.dataOne').length; var appendLi = ''; if(valLen>thislen){ for(var i = thislen; i< valLen; i++){ appendLi += '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span></div></div></li>'; } } $('.dataNums').append(appendLi); } this.scroNum(options); }, scroNum: function(options){ var number = options.deVal; var $num_item = $('.' + options.className).find('.tt'); var h = $('.dataBoc').height(); $num_item.css('transition','all 2s ease-in-out'); var numberStr = number.toString(); if(numberStr.length <= $num_item.length - 1){ var tempStr = ''; for(var a = 0; a < $num_item.length - numberStr.length; a++){ tempStr += '0'; } numberStr = tempStr + numberStr; } var numberArr = numberStr.split(''); $num_item.each(function(i, item) { setTimeout(function(){ $num_item.eq(i).css('top',-parseInt(numberArr[i])*h - h*10 + 'px'); },i*100) }); } } $.fn.rollNumDaq = function(options){ var $that = this; var rollNumObj = new rollNumDaq($that, options); rollNumObj.init(); }; })(jQuery, window, document);
css
@charset "utf-8"; /* CSS Document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, li, ol, ul,input,select,button,textarea,tr,td{ padding:0; margin:0; border:none;} input,button,select,textarea,a,img{outline:none; }/*去掉超链接或按钮点击时出现的虚线框黄色边框*/ ::-moz-focus-inner{border:0px;}/*火狐的私有属性去掉点击时边框*/ body,html{ width:100%; font-family:"Microsoft YaHei","Arial", "SimSun";} ul, ul li, ol li, li { list-style:none;} a, img, input, textarea {border:none;} a { text-decoration: none; } table { border-collapse: collapse;border-spacing:0;} .clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;} * html .clearfix {zoom: 1;} *:first-child + html .clearfix {zoom: 1;} .fl { float:left;} .fr { float:right;} .none{ display:none;} .inrow{font-size:0;[;font-size:12px;];*font-size:0;font-family:arial;[;letter-spacing:-3px;];*letter-spacing:normal;*word-spacing:-1px;} .inrow>li,.inrow span{display:inline-block;*display:inline;*zoom:1;font-size:14px;letter-spacing:normal;word-spacing:normal; } .dataNums{display: block; width:100%; height:75px; margin-top: 5px; text-align:center;} .dataNums .dataOne{ width:61px; height:75px; margin: 0px 3px; text-align: center; background: url(../images/num-bg.png) no-repeat;} .dataNums .dataBoc {position: relative; width: 100%; height: 100%; overflow: hidden;} .dataNums .dataBoc .tt {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .dataNums .tt span{width:100%;height:100%; font:bold 54px/75px "Arial";color:#ddf0ff;}
css所需图片
显示效果图
