jQuery实现数字滚动

最新推荐文章于 2024-01-29 10:23:50 发布

Faded_b

最新推荐文章于 2024-01-29 10:23:50 发布

阅读量941

点赞数

分类专栏： jQuery文字特效 web优化文章标签： html javascript jquery 文字滚动

本文链接：https://blog.csdn.net/sun_nan_vip/article/details/73189018

版权

web优化同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery文字特效

0 篇文章 0 订阅

订阅专栏

<div class="wrap">
   <div class="num-attack"  data-count="535610091">
   </div>
 </div>

<style type="text/css">

.wrap{
    z-index: 2;
    height: 55px;
    z-index: 2;
    overflow: hidden;
    background: blue; 
    width: 400px;  
}


.num-attack,
.num-speed{
    height: 40px;
    float: left;
    padding-top: 15px;
    position: relative;
    padding-right: 38px;
    top: -56px;
    letter-spacing: -75px;
}
.num-speed{
    margin-left: 130px;
}
.num-title{
    line-height: 19px;
    height: 19px;
    color: #2C3E50;
}
.num-s,
.num-attack .num,
.num-speed .num{
    position: relative;
    /*overflow: hidden;*/
    color: #25D0C3;
    font-size: 42px;
    line-height: 50px;
    font-weight: 700;
    height: 50px;
    font-family: 'Helvetica Neue';
    float: left;
}

.num-s{
    /*width: 15px;*/
    top: 42px;
    left: 26px;
}

.num-attack .num-inner,
.num-speed .num-inner{
    position: relative;
    float: left;
    top: 0;
}


</style>

 <script type="text/html" id="tpl">
<div class="num">
    <ul class="num-inner" style="list-style: none">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li> 
    </ul>
</div>
</script>

<script id="ntpl" type="text/tpl">
<div class="num-s">,</div>
</script>

  <script type="text/javascript" src="jquery.1.9.1.js"></script>
  <script type="text/javascript">

    var num = 0;
    var tpl = $('#tpl').html().replace(/[\n\t]|\s{2,}/g,'');
    var ntpl = $('#ntpl').html().replace(/[\n\t]|\s{2,}/g,'');

    function setNumber($wrap, num){ 
        var $nums = $wrap.find('.num');
        var nums = [];
        var num = num.toString().split(''); 

        if($nums.length<num.length){
            var diff = num.length- $nums.length;
            for(var i=0; i<diff; i++){
                var $tmpNum = $wrap.find('.num');
                if($tmpNum.length){ 
                    if( !($tmpNum.length % 3) ){ 
                        var $s= $(ntpl);
                        $s.insertBefore($tmpNum.eq(0)); 
                        $(tpl).insertBefore($s);
                    } else {
                        $(tpl).insertBefore($tmpNum.eq(0));
                    } 
                }else{
                    $wrap.append(tpl); 
                } 
            }
        }
        
        $nums = $wrap.find('.num'); 
        for(var i=$nums.length-1; i>-1; i--){ 
            $nums.eq(i).find('.num-inner').animate({
                top: -50 * num[i]
            });
        }
    } 

    var $numAttack    = $('.num-attack');
    var $attack_total = $numAttack.data("count");
    setNumber($numAttack, $attack_total);
    setInterval(function(){
        var add1 = Math.round(Math.random());
        setNumber($numAttack, ($attack_total = $attack_total + 1) );
    }, 500);

  

  </script>