高效的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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
Javascript !!的作用
Dec 04 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
关于layui 下拉列表的change事件详解
Sep 20 Javascript
vue 中固定导航栏的实例代码
Nov 01 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python pandas如何向excel添加数据
2020/05/22 Python
大学生求职简历的自我评价
2013/10/14 职场文书
中学生差生评语
2014/01/30 职场文书
大型演出策划方案
2014/05/28 职场文书
2014高考励志标语
2014/06/05 职场文书
党委班子剖析材料
2014/08/21 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
音乐教师个人总结
2015/02/06 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP