高效的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程序设计有所帮助。

Javascript 相关文章推荐
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jquery实现拖动效果
Aug 10 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
JS监听Esc 键触发事键
Apr 14 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
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
jQuery 源码分析笔记
2011/05/25 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
详解用node.js实现简单的反向代理
2017/06/26 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
原生js实现trigger方法示例代码
2019/05/22 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
绩效管理实施方案
2014/03/19 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
毕业设计论文评语
2014/12/31 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android