高效的jquery數字滾動特效

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 高效的jquery數字滾動特效

高效的jquery數字滾動特效

編輯：關於JavaScript

本文實例講述了基於jquery數字滾動特效的代碼，分為四種情況分享給大家供大家參考，具體如下：

有分隔符，有小數點：<div class="numberRun"></div> <br><br>
只有分隔符：<div class="numberRun2"></div> <br><br>
只有小數點：<div class="numberRun3"></div> <br><br>
無分隔符，無小數點：<div class="numberRun4"></div>

運行效果圖：

具體代碼如下

<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程序設計有所幫助。

上一頁:js獲取本機操作系統類型的兩種方法
下一頁:JS函數的幾種定義方式分析

關於JavaScript

js 能實現監聽F5頁面刷新子iframe 而父頁面不刷新的方法: 重點是阻止默認的刷新，這樣外部頁面就不刷新了，然後指定刷新iframe，我下面給出了思路docume
setTimeout內不支持jquery的選擇器的解決方案: 今天在寫一個js延時事件的時候發現在setTimeout這個方法裡面使用jquery的$(this)
基於javascript制作微博發布欄效果: 本文為大家分享了做微博發布欄效果的過程，涉及到的知識點包括以下：1.判斷IE的方法：直接用

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

小編推薦

javascript生成大小寫字母 JS創建類和對象的兩種不同方式 JavaScript中獲取鼠標位置相關屬性總結詳解javascript中原始數據類型Null和Undefined 基於Vue如何封裝分頁組件實例詳解ECMAScript5中新增的Array方法 JavaScript前補零操作實例 javascript原型模式用法實例詳解使用js畫圖之餅圖利用D3.js實現最簡單的柱狀圖示例代碼

DIV CSS 佈局教程網

相關文章