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">functionmagic_number(str) {var size =str.length;$("#dataNums").rollNumDaq({deVal:str,digit:size});};functionupdate() {$.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:''    //默认显示几位数字
};functionrollNumDaq(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 = newrollNumDaq($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所需图片

显示效果图

转载于:https://www.cnblogs.com/nxblog/p/8601747.html

jquery 数字滚动特效数字自增特效数字位数动态适应相关推荐

python数字滚动效果_玩转PPT数字滚动，让数据动起来
大数据时代,各类数字充斥着我们生活的方方面面,相较传统印象中平面冷硬的形象,当下数字的展现已向可视化.多样化转变与流行.如何玩转数字,让数字"活"起来.动起来,是不少职场达人展示数 ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
cocos2D捕鱼达人源代码初学者详解4数字滚动
数字滚动由两个类实现,数字类UINumber和数字滚动类UIRollNum,都是继承的CCSprite,都是精灵.数字类实现单个数字的上下滚动,数字滚动类实现了界面分数数字的位置设置,分数变化时把分数 ...
jquery实现数字滚动特效
一.引入js文件 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <s ...
html数字滚动动画效果,高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点: 只有分隔符: 只有小数点: 无分隔符,无小数点: 运行效果图: 具体代码如下数字 ...
css3数字滚动特效简单实现
放在大屏里面的数字滚动特效的简单实现, 思路参考:https://blog.csdn.net/nidunlove/article/details/78257549 结合业务需求和自己的思考拿vue写了 ...
h5 数字变化_那些H5用到的技术（6）——数字滚动特效
前言会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了呢? 这个效果我是在开源中国上找到的 http ...
html数字滚动选择,js实现数字滚动特效
本文实例为大家分享了js实现数字滚动展示的具体代码,供大家参考,具体内容如下效果图 html代码 Title #t,#tt{ border: #ccc thin solid; width: 250p ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...

jquery 数字滚动特效数字自增特效数字位数动态适应

jquery 数字滚动特效数字自增特效数字位数动态适应相关推荐

最新文章

热门文章

jquery 数字滚动特效 数字自增特效 数字位数动态适应

jquery 数字滚动特效 数字自增特效 数字位数动态适应相关推荐

最新文章

热门文章

jquery 数字滚动特效数字自增特效数字位数动态适应

jquery 数字滚动特效数字自增特效数字位数动态适应相关推荐