黑客帝国文字下落效果

源代码如下：

<!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. ‘Cordova/CDVViewController.h’ file not found Xcode 7.1

    Add this line to your Build Settings -> Header Search Paths: "$(OBJROOT)/UninstalledProducts ...

  2. <td colspan="2" > 一个td占两个 td空间

    <tr> <td>机构名称: ${accreditInfo.companyName}</td> <td>初始授信额度: ${accreditInfo.i ...

  3. IE8 CSS hack 测试

    IE8正式版出来有一段日子了,但是针对ie8正式版的CSS hack却很少,其实这是值得庆幸的,因为ie8修复了很多IE6和IE7的一些BUG,更加接近W3C标准.针对IE8正式版的CSS hack目 ...

  4. 正则表达式入门教程&&经典Javascript正则表达式（share）

    前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...

  5. linux信号处理及libcurl的坑

    前言:     最近有个项目, 需要访问第三方服务. 该服务是通过http的形式访问的, 为了安全和加密, 对方提供了一个加密用的C/C++库, 用于对参数进行处理.  鉴于此, 选用了C/C++语言 ...

  6. Set-常用API及详解

    SetAPI: 类别 方法 增 add.addAll 删 remove.removeAll 长 size 遍 iterator 判 isEmpty hashCode 使用与集合大同小异,主要的区别就在 ...

  7. Bootstrap部分---环境安装及一个可视化的布局；

    一:环境安装*****顺序不可变***** <head> 如果需要可以设定,移动设备优先 <meta name="viewport" content=" ...

  8. Linux磁盘空间被未知资源耗尽【转】

    Linux磁盘空间被未知资源耗尽 在linux中,当我们使用rm在linux上删除了大文件,但是如果有进程打开了这个大文件,却没有关闭这个文件的句柄,那么linux内核还是不会释放这个文件的磁盘空间, ...

  9. 【转】IOS学习笔记29—提示框第三方库之MBProgressHUD

    原文网址:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...

  10. PHP-网页跳转的几种方式

    本文总结了跳转到指定网页的几种方式. 1.利用PHP的header函数Location响应头, header是用来向浏览器返回HTTP响应头(详细请看HTTP协议详解) <?php header ...