黑客帝国文字下落效果

源代码如下：

<!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. ERROR 1130: Host ’...′ is not allowed to connect to this MySQL server

    /******************************************************************** * ERROR 1130: Host ’...′ is no ...

  2. html 遇到margin居中的问题

    今天在写div时发现不居中, div{ margin:0 auto; } 那么给div一个固定的宽度,就会居中了 div{ margin:0 auto; width:500px; }

  3. javascript中 IE事件处理程序中try catch用法

    本例是学习中笔记 望指正批评! <input id='b1' type='button' value='按钮'/> <script> window.onload=functio ...

  4. 多个Tomcat同时运行环境配置 - imsoft.cnblogs

    解压下载好的Tomcat压缩包,两次.此例中分别命名为tomcat和tomcat2. 1. 在MyEclipse中配置好第一个Tomcat环境,可以正常运行项目后. 2. 再配置tomcat2这个项目 ...

  5. P168 实战练习（构造方法）

    尝试编写一个矩形类,将长宽做为矩形类的属性,在构造方法中将长宽初始化,定义一个成员方法求此矩形的面积. 编写代码如下: 创建Rectangular类,则相关代码为: package org.hanqi ...

  6. 【NOIP2007】矩阵取数

    因为傻逼写错高精度搞了一下午浪费好多时间,好想哭qaq 原题: 帅帅经常更同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij据为非负整数.游戏规则如下: 1. 每次取数时须从每 ...

  7. What is Proguard?

    When packaging an apk, all classes of all libraries used by the program will be included, this makes ...

  8. JSON的转换（将JSON转换为字符串，将字符串转化为JSON）

    eval()和JSON.stringify()   1.eval用于从一个字符串中解析出json 对象,创建包含 JSON 语法的 JavaScript 字符串.例如 var str = '{ &qu ...

  9. bootstrap 固定底部导航自适应

    在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖 自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...

  10. C#代码：用事件模式实现通知

    事件提供了一种标准的机制来通知监听者..NET的事件模式使用了事件语法来实现观察者模式.任意数量的客户对象都可以将自己的处理函数注册到事件上,然后处理这些事件.这些客户对象不需要再编译期就给出.时间也 ...