jquery는 디지털 스크롤 효과를 구현합니다.

이번에는 디지털 스크롤 특수 효과를 구현하기 위한 jquery를 가져오겠습니다. jquery를 사용하여 디지털 스크롤 특수 효과를 구현하는 데 있어 주의 사항은 무엇입니까? 다음은 실제 사례를 살펴보겠습니다.

구분 기호와 소수점이 있습니다:

• 구분 기호만:

  
  
  

• 소수점만:

  
  
  

• 구분자 없음, 소수점 없음:

렌더링 실행:

구체적인 코드는 다음과 같습니다

<title>数字滚动插件</title>
<meta>
<script></script>
<style>
/*数字滚动插件的CSS可调整样式*/
.mt-number-animate{ font-family: &#39;微软雅黑&#39;; 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>


<br><br>
有分隔符，有小数点：<p></p> <br><br>
只有分隔符：<p></p> <br><br>
只有小数点：<p></p> <br><br>
无分隔符，无小数点：<p></p>
 

<script>
/**
*  by Mantou qq:676015863
*  数字滚动插件 v1.0
*/
;(function($) {
  $.fn.numberAnimate = function(setting) {
    var defaults = {
      speed : 1000,//动画速度
      num : "", //初始化值
      iniAnimate : true, //是否要初始化动画效果
      symbol : &#39;&#39;,//默认的分割符号，千，万，千万
      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 = &#39;<p class="mt-number-animate-dom" data-num="{{num}}">\
            <span class="mt-number-animate-span">0\
            <span class="mt-number-animate-span">1\
            <span class="mt-number-animate-span">2\
            <span class="mt-number-animate-span">3\
            <span class="mt-number-animate-span">4\
            <span class="mt-number-animate-span">5\
            <span class="mt-number-animate-span">6\
            <span class="mt-number-animate-span">7\
            <span class="mt-number-animate-span">8\
            <span class="mt-number-animate-span">9\
            <span class="mt-number-animate-span">.\
          &#39;;
 
    //数字处理
    var numToArr = function(num){
      num = parseFloat(num).toFixed(setting.dot);
      if(typeof(num) == &#39;number&#39;){
        var arrStr = num.toString().split("");  
      }else{
        var arrStr = num.split("");
      }
      //console.log(arrStr);
      return arrStr;
    }
 
    //设置DOM symbol:分割符号
    var setNumDom = function(arrStr){
      var shtml = &#39;<p class="mt-number-animate">&#39;;
      for(var i=0,len=arrStr.length; i<len; i++){
        if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){
          shtml += &#39;<p class="mt-number-animate-dot">&#39;+setting.symbol+&#39;&#39;+nHtml.replace("{{num}}",arrStr[i]);
        }else{
          shtml += nHtml.replace("{{num}}",arrStr[i]);
        }
      }
      shtml += &#39;&#39;;
      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({
                &#39;transform&#39;:&#39;translateY(&#39;+thisTop+&#39;)&#39;,
                &#39;-ms-transform&#39;:&#39;translateY(&#39;+thisTop+&#39;)&#39;,   /* IE 9 */
                &#39;-moz-transform&#39;:&#39;translateY(&#39;+thisTop+&#39;)&#39;,  /* Firefox */
                &#39;-webkit-transform&#39;:&#39;translateY(&#39;+thisTop+&#39;)&#39;, /* Safari 和 Chrome */
                &#39;-o-transform&#39;:&#39;translateY(&#39;+thisTop+&#39;)&#39;,
                &#39;-ms-transition&#39;:setting.speed/1000+&#39;s&#39;,
                &#39;-moz-transition&#39;:setting.speed/1000+&#39;s&#39;,
                &#39;-webkit-transition&#39;:setting.speed/1000+&#39;s&#39;,
                &#39;-o-transition&#39;:setting.speed/1000+&#39;s&#39;,
                &#39;transition&#39;:setting.speed/1000+&#39;s&#39;
              }); 
            }
          }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:&#39;15343242.10&#39;, dot:2, speed:2000, symbol:","});
  var nums = 15343242.10;
  setInterval(function(){
    nums+= 3433.24;
    numRun.resetData(nums);
  },3000);
 
 
  var numRun2 = $(".numberRun2").numberAnimate({num:&#39;15343242&#39;, speed:2000, symbol:","});
  var nums2 = 15343242;
  setInterval(function(){
    nums2+= 1433;
    numRun2.resetData(nums2);
  },2000);
 
 
  var numRun3 = $(".numberRun3").numberAnimate({num:&#39;52353434.343&#39;, dot:3, speed:2000});
  var nums3 = 52353434.343;
  setInterval(function(){
    nums3+= 454.521;
    numRun3.resetData(nums3);
  },4000);
 
  var numRun4 = $(".numberRun4").numberAnimate({num:&#39;52353434&#39;, speed:2000});
  var nums4 = 52353434;
  setInterval(function(){
    nums4+= 123454;
    numRun4.resetData(nums4);
  },3500);
 
});
</script>

믿습니다 당신은 이 기사를 읽었습니다. 더 흥미로운 정보를 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).

jQuery 플러그인은 테이블의 교대 행 색상 변경을 구현하고 마우스와 상호 작용합니다.

위 내용은 jquery는 디지털 스크롤 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!