数字滚动效果（CSS3 transition属性）

效果：初始化加载+定时刷新增加数值

相关代码：

容器：

<h2>不循环样式</h2>
<!-- 任意一个非行内元素就可以当做容器，绑定id 或 class ,必须设置容器的高度 height,因为每个数字的高度是由容器的高度决定所以容器的高度必须要设置的 -->
<div class="scroll-number-0"></div>

引入js文件：

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

初始化对象运行：

            var scrollNumber0 = new gScrollNumber(".scroll-number-0", {
                width: 30, // 每个数字元素的宽
                color: "orange", // 数字元素的字体颜色
                fontSize: 40, // 数字元素的字体大小
                autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
                background: "#333",
            });

            var value=1023571;
            scrollNumber0.run(value0+=4302);

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=414,user-scalable=0">
        <title>里程表数字滚动效果 Demo</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                width: 100%;
            }
            
            .container {
                margin: 100px auto;
            }
            
            .container div {
                margin-left: 10px;
                display: block;
                height: 60px;
                border: 1px solid goldenrod;
                margin-top: 10px;
                margin-right: 10px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <h2>不循环样式</h2>
            <div class="scroll-number-0"></div>
        </div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="gScrollNumber.js"></script>

        <script>
            /**
             * 初始化一个数字滚动对象
             * 构造函数的参数项可查看 gScrollNumber.js 里面的注释
             */
            var scrollNumber0 = new gScrollNumber(".scroll-number-0", {
                width: 30, // 每个数字元素的宽
                color: "orange", // 数字元素的字体颜色
                fontSize: 40, // 数字元素的字体大小
                autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
                background: "#333",
            });

            var value0;
            value0 = 1023571;
            scrollNumber0.run(value0+=4302);
            
            setInterval(function() {
                scrollNumber0.run(value0+=4302);
            }, 3000);
        </script>
    </body>

</html>

gScrollNumber.js代码
基本原理：每个数字都包含0-9的样式，通过在一定时间内滚动到指定的位置（top:-**px）实现数字滚动的效果。

transition：CSS3过渡

/**
 * Created by GYFlasher on 2017-12-08.
 */
/**
 * 滚动数字 (依赖jq)
 * @param el 用来显示滚动字幕的容器class 或 id
 * @param option 配置参数 width: 数字的宽 (无单位),fontSize: 字体大小（无单位）, color: 文字颜色,autoSizeContainerWidth: 自动计算容器宽度
 * @returns {Object}
 */
function gScrollNumber(el,option) {
    this.container = $(el);
    this.option = option;
    this.container.css({
        position: "relative",
        padding: "0",
        overflow: "hidden"
    });
    var height = this.container.height();
    this.subWidth = option.width;
    this.subHeight = height;
    this.autoSizeContainerWidth = option.autoSizeContainerWidth;
    this.background=option.background;
    this.col = '<span class="g-num-item" style="top: 0;">' +
        '<i>0</i>' +
        '<i>1</i>' +
        '<i>2</i>' +
        '<i>3</i>' +
        '<i>4</i>' +
        '<i>5</i>' +
        '<i>6</i>' +
        '<i>7</i>' +
        '<i>8</i>' +
        '<i>9</i>' +
        '<i>.</i>' +
        '</span>';
}
gScrollNumber.prototype.run = function (value) {
//  console.log("old = " + this.currentValue + "\nnew = " + value);
    this.currentValue = value;
    var self = this;
    var valueString = value.toString();
    if (self.autoSizeContainerWidth) {
        self.container.css({
            "width": valueString.length * self.subWidth + "px"
        });
    }
    var oldLength = self.container.children(".g-num-item").length;

    if (valueString.length > oldLength) {
        for (var i = 0; i < valueString.length - oldLength; i++) {
            self.container.append(self.col);
            self.container.children(".g-num-item").eq(oldLength + i).css({
                right: self.subWidth * (oldLength + i) + "px"
            });
        }
    }else if (valueString.length < oldLength) {
        for (var i = 0; i < oldLength - valueString.length; i++) {
            self.container.children(".g-num-item:last").remove();
        }
    }
    $(".g-num-item").css({
        position: "absolute",
        width: self.subWidth + "px",
        height: 11 * self.subHeight + "px"
    });
    $(".g-num-item i").css({
        width: self.subWidth + "px",
        height: self.subHeight + "px",
        lineHeight: self.subHeight + "px",
        textAlign: "center",
        fontSize: self.option.fontSize + "px",
        color: self.option.color,
        display: "block",
        fontStyle: "normal",
        background:self.background,//梁涛新增background属性
    });
    setTimeout(function () {
        if (valueString.length !== self.container.children(".g-num-item").length) {
            console.log("%c%s","color:red;", "数字位数和数字条个数不相等");
            debugger
        }
        for (var i = 0; i < valueString.length; i++) {
            var y = 0;
            if (valueString[i] != ".") {
                y = - (parseInt(valueString[i]) * self.subHeight);
            }else {
                y = - (10 * self.subHeight);
            }
            // console.log(self.container.attr("class") + " / " + self.container.attr("id") + " : " +valueString);
            self.container.children(".g-num-item").eq(valueString.length - i - 1).css({
                top: y + "px",
                transition: "top 1.0s" 
            })
        }
    }, 0);
};
gScrollNumber.prototype.getCurrentValue = function () {
    return this.currentValue;
};

原文地址：https://github.com/GYFlash/gScrollNumber.js

数字滚动效果（CSS3 transition属性）

猜你喜欢