字符雨效果实现

来源：互联网发布：java简单程序编辑：程序博客网时间：2024/05/21 17:49

题目

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

效果图：

样例答案

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>

0 0