黑客帝国文字下落效果

源代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>黑客帝国文字下落</title>

        <style>

        html, body {margin:0; padding:0; background-color:#000;}

        #divList {width:800px; height:500px; border:solid 3px gray; margin: 0px auto; overflow:hidden; position: relative;}

        .divText {position: absolute;}

        .divText span {display:block; font-weight: bold; font-family:Courier New; }

        </style>

        <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

    </head>

    <body>

    <h1 style="text-align:center; color:gray;">黑客帝国文字下落 (<span id="spanCount">0</span>)</h1>

    <div id="divList">

    </div>

    <script>

    function rand(min, max)

    {

        return min + Math.round(Math.random() * (max - min));

    }

    function add()

    {

        var x = rand(0, 800);

        var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">';

        /*

        var color1 = [];

        var color2 = [];

        var color3 = [];

        var color4 = [];

        var color5 = [];

        var color6 = [];

        for (var i=1; i<17; i++)

        {

            var f = i.toString(16);

            color1.push('0' + f + '0');

            color2.push(f + '00');

            color3.push('00' + f);

            color4.push('0' + f + f);

            color5.push(f + f + '0');

            color6.push(f + '0' + f);

        }

        var color = [color1, color2, color3, color4, color5, color6];

        var ci = rand(0, 5);

        */

        var color = [];

        for (var i=1; i<17; i++)

        {

            var f = i.toString(16);

            color.push('0' + f + '0');

        }

        var fontSize = rand(9, 24);

        for (var i=1; i<17; i++)

        {

            var c = rand(33, 127);

            var c = String.fromCharCode(c);

            // html += '<span class="s' + i + '" style="color:#' + color[ci][i-1] + '; font-size:' + fontSize + 'px;">' + c + '</span>';

            html += '<span class="s' + i + '" style="color:#' + color[i-1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i-1] + ';">' + c + '</span>';

        }

        html += '</div>';

        $('#divList').append(html);

    }

    function run()

    {

        var x = rand(0, 100);

        if (x < 100)

        {

            add();

        }

        $('#spanCount').html($('.divText').size());

        $('.divText').each(function(){

            var y = $(this).css('bottom');

            y = parseInt(y);

            y -= $(this).find('span').eq(0).height();

            $(this).css('bottom', '' + y + 'px');

            if (y + $(this).height() <= 0)

            {

                $(this).remove();

                return;

            }

            $(this).find('span').each(function(){

                var c = rand(33, 127);

                var c = String.fromCharCode(c);

                $(this).html(c);

            });

        });

        window.setTimeout(run, 100);

    }

    run();

    </script>

    </body>

</html>

下载地址：http://files.cnblogs.com/zjfree/hk_text1.zip

JS 黑客帝国文字下落效果的更多相关文章

  1. js实现黑客帝国文字下落效果

    突然想到这个效果便想实现以下. 当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章, 效果可以查看博文中的给出的效果图.那 ...

  2. JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <l ...

  3. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  4. 【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图

    需要描述 1)实现黑客帝国文字流效果图,JS功能 2)部署在云中,让大家都可以访问,App Service实现 3)大家都能发送消息,并显示在文字流中,PubSub(websocket)实现 终极效果 ...

  5. js仿黑客帝国文字数字雨效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  7. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  8. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  9. JS文字翻滚效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...

随机推荐

  1. lhgdialog 与后台交互的对话框

    官网:http://www.lhgdialog.com/ 1. 调用打开dialog的按钮 <span class="txtdec fs10 open"> <a ...

  2. Word Ladder II

    Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformat ...

  3. vs2013 c++代码内出现中文导致编译错误

    简单的做法就是,首先,菜单栏->文件->高级保存选项,选择utf-8 无签名, 然后,如果是发现注释语句里有中文,可以让注释语句与下行代码中间空一行, 如果是代码里有用到中文,那么就在中文 ...

  4. HTTP 简介

    HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...

  5. C函数及指针学习2

    1.break  永久终止循环,continue 结束当前循环 2.switch 每个case标签要有唯一值,(且为常量或常量表达式) 不加break 时执行流会贯穿整个case 标签 3 赋值操作符 ...

  6. spring mvc 重定向传参

    参考链接如下: http://bbs.csdn.net/topics/391034118?page=1 自己的示例程序: 详细页面提交一个修改动作,修改完成后跳转到检索页面,把检索条件重新赋值给检索页 ...

  7. AXIOM解析XML 详细原理

    转自:http://warlaze.blog.sohu.com/58477971.html AXIOM Axis对象模型(AXIOM)是一个XML对象模型,设计用于提高XML处理期间的内存的使用率和性 ...

  8. 【NOIP2014】飞扬的小鸟

    看syq的代码写出来的,chty_orz 原题: Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小 ...

  9. PPT图片快速编辑技巧

    修改*.ppt或*.pptx的后缀名为zip 例如:demo.pptx修改为demo.zip 修改为, 使用压缩软件打开此压缩包, 一般图片资源都会存放在ppt/media下 找到你所要修改的图片,然 ...

  10. Java——异常

     /* * 异常:   是在运行时期  发生的 不正常情况. *  在java中类的形式对不正常情况进行了描述和封装对象. * * 描述不正常的情况类,就成为异常. * * 问题很多,就意味着描述 ...