字符雨效果实现

最新推荐文章于 2025-06-04 15:27:04 发布

sysuzjz

最新推荐文章于 2025-06-04 15:27:04 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：字符雨特效

本文链接：https://blog.youkuaiyun.com/sysuzjz/article/details/49717771

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何实现字符雨特效，包括使用CSS进行样式设置，JS编写动态效果，并提供了调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目

模仿黑客帝国的字符雨特效，要求字符串中的字符随机，长度随机，位置随机。

效果图：

样例答案

CSS

html, body {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

.flow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;

}

JS

var MAX_LENGTH = 20;
var MIN_LENGTH = 10;

function Flow(conf) {
    if(!(this instanceof Flow)) {
        return new Flow();
    }
    var defaultOption = {
        min: 10,
        max: 20,
        interval: 5000
    };
    this.option = $.extend({}, defaultOption, conf);

    this.element = createFlow(this.option);

    this.show = function() {
        var that = this;
        var screenWidth = $(window).width();
        this.element.appendTo($('body')).css({
            left: getRandNum(0, screenWidth),
            top: -that.element.height()
        }).show();
        return this;
    };

    this.move = function() {
        var that = this;
        var screenHeight = $(window).height();
        this.element.animate({top: screenHeight}, that.option.interval, function() {
            that.destroy();
        });
        return this;
    }

    this.destroy = function() {
        this.element.remove();
        for(var prop in this) {
            if(this.hasOwnProperty(prop)) {
                delete this[prop];
            }
        }
    }
}

function createFlow(option) {
    var htmlArr = [];
    htmlArr.push('<ul class="flow"> ');
    var length = getRandNum(option.min, option.max);
    for(var i = 0; i < length; i++) {
        var randChar = getRandChar();
        var liStr = '<li class="flowItem">' + randChar + '</li>';
        htmlArr.push(liStr);
    }
    htmlArr.push('</ul>');
    return $(htmlArr.join(''));
}




function getRandNum(min, max) {
    return parseInt(Math.random() * (max - min) ) + min;
}

function getRandChar() {
    var chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    var randNum = getRandNum(0, chars.length - 1);
    return chars[randNum];
}

调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字符雨效果演示</title>
    <link rel="stylesheet" type="text/css" href="flow.css">
</head>
<body>

</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="flow.js"></script>
<script type="text/javascript">
    setInterval(function() {
        var flow = new Flow({
            min: 1
        });
        flow.show().move();

    }, 1000);
</script>
</html>