字符雨效果实现

男娘i 2022-08-10 03:34 199阅读 0赞

# 题目 #

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

效果图：

![字符雨][1344001759_5680.gif]

# 样例答案 #

## 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>

[1344001759_5680.gif]: https://img-my.csdn.net/uploads/201208/03/1344001759_5680.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关用python实现代码雨（电影黑客帝国里的效果，代码可直接运行）

用python实现代码雨： -- coding:utf-8 -- import random import pygame from pyga

太过爱你忘了你带给我的痛/ 2022年12月15日 03:42/ 0 赞/ 282 阅读

相关 js 十分钟实现字符跳动效果。

转自：[http://www.pinlue.com/article/2019/07/3114/219421886153.html][http_www.pinlue.com_ar

傷城~/ 2022年12月11日 04:21/ 0 赞/ 71 阅读

相关雨中走路淋雨多还是跑步淋雨多？

雨中走路淋雨多还是跑步淋雨多？前言 1. 物理模型 2. 基本分析 3. 如何淋雨少？ 4. 还能再给力一点吗？前言每次下雨我

雨点打透心脏的1/2处/ 2022年09月17日 03:17/ 0 赞/ 200 阅读

相关 js实现黑客代码雨效果

效果他是动的哈，上传gif太大，CSDN不让传，所以只放了图片 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2

墨蓝/ 2022年09月14日 09:16/ 0 赞/ 128 阅读

相关纯 CSS 实现科技感十足的暗黑字符雨动画

本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画： ![f6571a5f0dbc50ab6a42ea12a779a549.gif

短命女/ 2022年09月06日 00:05/ 0 赞/ 318 阅读

相关字符雨效果实现

题目模仿黑客帝国的字符雨特效，要求字符串中的字符随机，长度随机，位置随机。效果图： ![字符雨][1344001759_5680.gif] 样

男娘i/ 2022年08月10日 03:34/ 0 赞/ 200 阅读

相关 JavaScript 字符雨

<html> <head> <meta charset="utf8"/> <title>字符雨</tit

Bertha 。/ 2022年07月13日 13:56/ 0 赞/ 109 阅读

相关 c语言实现数字雨

控制生成的数字为0和1两个数 st\[i\].ch = rand()%(49-47)+48; gotoxy函数确定ch在屏幕中出现的位置，set\_color函数

素颜马尾好姑娘i/ 2022年07月12日 12:49/ 0 赞/ 158 阅读

相关 linux终端实现骇客帝国的字符雨动画

先下载数字雨软件,即在终端输入：（Ubuntu系统且可以上网才可以安装） sudo apt-get install cmatrix 然后执行程序： cma

Myth丶恋晨/ 2022年03月22日 08:00/ 0 赞/ 268 阅读

相关 CMD命令实现数字雨

使用cmd命令可以实现类似黑客帝国中的数字雨，这里给出脚本和演示效果： digitalrain.bat @echo off title digitalrai

素颜马尾好姑娘i/ 2022年02月15日 15:38/ 0 赞/ 300 阅读