數字滾動特效,甲方爸爸要,先手寫一個原型吧,你值得拿去繼續擼效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    </head>
    <style>

    </style>
    <body>
        <div class="num ">
        </div>
    </body>

    <script>
        $(function() {
            var num = '19865';
            for (var i = 0; i < num.length; i++) {
                $(".num").append("<span class='item item" + (i + 1) + "'>" + num[i] + "</span>")
                $(".item:nth-child(" + (i + 1) + ")").text(addFun(num[i], $(".item:nth-child(" + (i +1) + ")")))
            }

            function addFun(num, obj) {
                var i = 0;
                setInterval(function() {
                    i++;
                    if (i <= num) {
                        obj.text(i);
                    }
                }, 90)
            }
        })
    </script>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章