js，jq html css 实现数字上下滚动效果

最新推荐文章于 2023-10-20 14:30:38 发布

码哥儿

最新推荐文章于 2023-10-20 14:30:38 发布

阅读量1.9k

点赞数 1

分类专栏：前端 css jq 文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_41607376/article/details/120845971

版权

前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

文章目录

使用方法
一、gScrollNumber.js是什么？
二、使用步骤
- 1.引入库
- 2.效果截图

使用方法

用于数字屏更新滚动效果。

一、gScrollNumber.js是什么？

用来使数字能发生滚动的js。

/**
 * 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;
};

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>数字滚动效果</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="gScrollNumber.js"></script>
</head>
<style type="text/css">
	.number {
		height:100px;width: auto;
		border: 10px solid #131212;
	}
	.g-num-item{
		border-right: 5px solid red;
	}
</style>
<body>
	<div class="number"></div>
	<script type="text/javascript">
		var total  = 1000;
        setInterval(function(){
            var scrollNumber0 = new gScrollNumber(".number", {
                width: 50, // 每个数字元素的宽
                color: "#1b1a1a", // 数字元素的字体颜色
                fontSize: 80, // 数字元素的字体大小
                autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
                background: "",
            });
            total = total + parseInt(Math.random()*10);
            scrollNumber0.run(total);
        },1000)
	</script>
</body>
</html>