js数字滚动效果组件

因为在网上没有找到想要的效果，因此自己整了一个简单的。有需要的可以自己拿去改，需要引入jquery。

 

 gif录制太麻烦了，就不搞了，放个图片意会一下

调用方式

// 第一个参数elementId：元素id
// 第二个参数num：需要展示的数字
// 第三个参数speed：数字滚动动画所需要的时间（毫秒）
// 第四个参数length：需要展示的数字位数，不足会在前面补0；超出并不会截取，而是展示全部。可以不填
numberScroll(elementId,num,speed,length)

js部分

function numberScroll(elementId,num,speed,length){
    $("#" + elementId).addClass("number-scroll")
    var numStr = num.toString()
    if(length && length > numStr.length){
        for (var i = 0; i < length - numStr.length; i++) {
            numStr = '0' + numStr
        }
    }
    var numberScrollItem = '<div class="number-scroll-view"><div class="number-scroll-item">'
    for (var i = 0; i < 10; i++) {
        numberScrollItem += '<div>'+i+'</div>'
    }
    numberScrollItem += '</div></div>'
    if(!$("#"+elementId).html()){
        var str = ''
        for (var i = 0; i < numStr.length; i++) {
            str += numberScrollItem
        }
        str += '<span class="number-scroll-value">'+ numStr +'</span>';
        $("#"+ elementId).html(str)
    }else{
        var origin = $("#"+elementId + " .number-scroll-value").html()
        $("#"+elementId + " .number-scroll-value").html(numStr)
        var diff = numStr.length - origin.length
        if(diff > 0){
            for (var i = 0; i < diff; i++) {
                $("#"+ elementId).prepend(numberScrollItem)
            }
        }else if(diff < 0){
            for (var i = 0; i < -diff; i++) {
                $("#"+ elementId).children().eq(0).remove()
            }
        }
    }
    var lineHeight = Number($("#"+ elementId +" .number-scroll-item").css("line-height").slice(0,-2))
    for (var i = 0; i < numStr.length; i++) {
        $("#"+ elementId).children("div:eq("+ i +")").children().animate({
            top : - Number(numStr[i]) * lineHeight
        },speed)
    }
}

css部分

@font-face {
    font-family: 'FX-LED';
    src: url('../font/FX-LED.ttf')
}

.number-scroll{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
}

.number-scroll-view{
    width: 33px;
    height: 46px;
    overflow: hidden;
    border: #4998E3 1px solid;
    box-shadow: 0 0 20px 1px rgba(46, 199, 255, 0.55) inset;
    line-height: 46px;
    margin:0 2px;
    text-align: center;
}

.number-scroll-item{
    font-family: FX-LED;
    font-size: 42px;
    color: #4DCFFF;
    position: relative;
}

.number-scroll-value{
    display: none;
}

字体：液晶字体下载