黑客帝国文字下落效果

源代码如下：

<!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. PHP 中安装memcache扩展文件下载对应地址。

    PHP 5.5.1版本下载了很多,安装都不成功.终于找到一个适合版本. http://windows.php.net/downloads/pecl/releases/memcache/3.0.8/   ...

  2. java实现读取文件大全

    1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件 ...

  3. CUDA 程序中的同步

    前言 在并发,多线程环境下,同步是一个很重要的环节.同步即是指进程/线程之间的执行顺序约定. 本文将介绍如何通过共享内存机制实现块内多线程之间的同步. 至于块之间的同步,需要使用到 global me ...

  4. BED format

    要用bedtools了, 当然要熟悉bed文件格式 一共十二列 1, chrom 不解释 2, start, 0-based 3, end, 说明书说是1-based, include. 不如理解为0 ...

  5. [转载] 动态链接库dll的 静态加载 与 动态加载

    转载自:http://blog.csdn.net/youxin2012/article/details/11538491 dll 两种链接方式  : 动态链接和静态链接(链接亦称加载)   动态链接是 ...

  6. C#堆栈讲解

    1:栈就是堆栈,因为堆和堆栈这样说太拗口了,搞得像绕口令,所以有些时候就把堆栈简称为栈.堆和栈,你看这又多舒服.但无论什么时候,堆栈都不等于堆和栈,必须说,堆和栈或者堆和堆栈. 2:值类型变量和引用类 ...

  7. 2015GitWebRTC编译实录7

    2015.07.20 libvoiceengine 编译通过去除了mock测试代码,mock是用来进行测试的,意义不大.另外会报一个常量错误,需要定义WEBRTC_MAC宏,只定义WEBRTC_IOS ...

  8. uva562 Dividing coins 01背包

    link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. leetcode 117 Populating Next Right Pointers in Each Node II ----- java

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  10. mysql创建用户和创建数据库赋值用户操作权限

    mysql 进入mysqldb SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user; ...