首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

高效的jquery数字滚动特效

Posted in Javascript onDecember 17, 2015

本文实例讲述了基于jquery数字滚动特效的代码，分为四种情况分享给大家供大家参考，具体如下：

  • 有分隔符，有小数点：<div class="numberRun"></div> <br><br>
  • 只有分隔符：<div class="numberRun2"></div> <br><br>
  • 只有小数点：<div class="numberRun3"></div> <br><br>
  • 无分隔符，无小数点：<div class="numberRun4"></div>

运行效果图：

高效的jquery数字滚动特效

具体代码如下

<html>
<head>
<title>数字滚动插件</title>
<meta charset="gb2312">
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<style>
/*数字滚动插件的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;}
</style>
</head>
<body>
<br><br>
有分隔符，有小数点：<div class="numberRun"></div> <br><br>
只有分隔符：<div class="numberRun2"></div> <br><br>
只有小数点：<div class="numberRun3"></div> <br><br>
无分隔符，无小数点：<div class="numberRun4"></div>
 
</body>
<script>
/**
*  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 = '<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">.</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]);
        }
      }
      shtml += '</div>';
      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);
 
});
</script>
</html>

代码复制即可运行。

希望本文所述对大家JavaScript程序设计有所帮助。

高效的jquery数字滚动特效

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS JavaScript获取Url参数，src属性参数
Mar 09 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
js逆向解密之网络爬虫
May 30 Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
基于jquery实现省市联动特效
Dec 17 #Javascript
js实现网页收藏功能
Dec 17 #Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 #Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 #Javascript
JS数组合并push与concat区别分析
Dec 17 #Javascript
keeplive_timeout(1) location(2) text-shadow(1) RTMP(1) 缓存机制(1) BufferPool(1) 区块链(2) zabbix(9) http_stub_status_module(1) TypeScript(2)
You might like
php实现建立多层级目录的方法
2014/07/19 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
下一代Bootstrap的5个特点 超酷炫！
2016/06/17 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
深入浅出分析Python装饰器用法
2017/07/28 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
pygame实现俄罗斯方块游戏（AI篇1）
2019/10/29 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
python的launcher用法知识点总结
2020/08/07 Python
了解一下python内建模块collections
2020/09/07 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
人事部岗位职责范本
2014/03/05 职场文书
文化建设工作方案
2014/05/12 职场文书
食品安全演讲稿
2014/09/01 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2015年银行个人工作总结
2015/05/14 职场文书