高效的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 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
js异常捕获方法介绍
Apr 10 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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对字符串的递增运算分析
2010/08/08 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php组合排序简单实现方法
2016/10/15 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
PyQt5每天必学之关闭窗口
2018/04/19 Python
tensorflow更改变量的值实例
2018/07/30 Python
python语言元素知识点详解
2019/05/15 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
python对文件的操作方法汇总
2020/02/28 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
药学专业毕业生求职信
2013/10/20 职场文书
业务员岗位职责
2013/11/16 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
委托书格式范文
2015/01/28 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
党员转正党支部意见
2015/06/02 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技