数字滚动

177 阅读1分钟

    
    RollingNumber
    


    
    
    <span class="right">0123456789</span>
    <span class="middle">0123456789</span>
    <span class="left">12</span>
</div>

<script src="jquery-1.11.3.js"></script>
<script>
    function animate_RGB(rgb){
        let arr = [];
        arr.push(parseInt(rgb/100));
        arr.push(parseInt(rgb%100/10));
        arr.push(parseInt(rgb%10));
        let $div = $(".num_span");
        $div.find('.left').css('margin-top',-arr[0]+1+'em')
        $div.find('.middle').css('margin-top',-arr[1]+'em')
        $div.find('.right').css('margin-top',-arr[2]+'em');
        if(rgb<10){
          $div.find('.middle').css('margin-top','1em');
        }
    }
    $("#valueRGB").on("change",function(){
        let val = parseInt($(this).val());
        if(val>=0&&val<256){
            console.log(val);
            animate_RGB($(this).val());
        }
    });
</script>