jquery实现数字滚动效果

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

大黑爱小白

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

阅读量3.2k

点赞数 2

分类专栏： JS技术文章标签： js 数字滚动

本文链接：https://blog.csdn.net/u013842165/article/details/86667122

版权

JS技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为需要，自己用jquery动手写了数字滚动效果

实现原理

1、先确定数字最大的位数，比如说最大数为6位数，就画出一排6个高度为30px的方格;

2、然后在每个方格区域增加一竖排的 0123456789，定时更新数字，转成字符串获取位数，确定每位上的数字大小，然后和当前的数字大小进行比较，最后使用animate方法更改marginTop距离顶部的大小，来实现数字滚动效果。全部代码如下: （jquery文件请自行引入）

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .number {
            background: #00BBEC;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            overflow: hidden;
            margin-left: 0.15rem;
            color: #000000;
            padding: 0 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="price-div" id="container1"></div>
<div class="price-div" id="container2"></div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    var rollInterval, total = 0;

    initPage($('#container1'), 6); // 初始化滚动数字最大的位数
    initPage($('#container2'), 6); // 初始化滚动数字最大的位数

    var numItemHeight = $('.num-item').eq(0).height(); // 获取数字dom的高度

    rollInterval = setInterval(fun, 1000); // 定时获取实时数据，实现数字滚动

    function fun() {
        total = total + 10;
        numberRoll($('#container1'), total);
        numberRoll($('#container2'), Math.floor(Math.random() * 1000000));
    }

    function numberRoll(container, total) {
        var number = total.toString().split("").reverse().join("");
        for (var i = 0; i < number.length; i++) {
            // 目标值如果比原本值大，则向上滚动，如果小则向下滚动（0 -> 3 从下往上滚动3个单元格高度 margeTop = -90px 反之 从上往下滚3个单元格高度 margeTop = 90px）
            var height = parseInt(number[i]) * numItemHeight;
            $(container).find('.num' + i + ' .numbers-view').animate({marginTop: -height}, 1000, "swing");
        }
    }

    function initPage(container, digit) {
        var uId = generateUniqueId();
        // $(container).attr('id', uId);
        var _html = '';
        for (var i = digit - 1; i >= 0; i--) {
            _html += '<div class="number num' + i + '">' +
                '<div class="numbers-view">' +
                    '<div class="num-item zero">0</div>' +
                    '<div class="num-item one">1</div>' +
                    '<div class="num-item two">2</div>' +
                    '<div class="num-item three">3</div>' +
                    '<div class="num-item four">4</div>' +
                    '<div class="num-item five">5</div>' +
                    '<div class="num-item six">6</div>' +
                    '<div class="num-item seven">7</div>' +
                    '<div class="num-item eight">8</div>' +
                    '<div class="num-item nine">9</div>' +
                '</div>' +
                '</div>';
        }
        container.html(_html);
    };

    // 生成唯一主键id
    function generateUniqueId() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    };

</script>
</body>
</html>