黑客帝国文字下落效果

源代码如下：

<!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. mark资料-selenium断言的分类

    操作(action).辅助(accessors)和断言(assertion): 操作action: 模拟用户与 Web 应用程序的交互. 辅助accessors: 这是辅助工具.用于检查应用程序的状态 ...

  2. 使用批处理文件，自动设置计算机IP地址

    WIN7批处理设置IP地址不成功,显示“The filename, directory name, or volume label syntax is incorrect.”错误, 解决方法:将“本地 ...

  3. 解决Eclipse Pydev中import时报错：Unresolved import

    在安装 图像处理工具包 mahotas 后,在eclipse中尝试import mahotas时,出现Unresolved import错误,按快捷无法自动生成代码提示 但是,程序运行时可以通过,在命 ...

  4. Protobuf C/C++实战笔记(1)

    前言: Protobuf作为数据交换格式, 被很多人喜欢. 数据压缩比高, 向后兼容性强, 性能优异, 而且对平台中性, 支持多语言(C/C++, JAVA, Python). 优点太多, 实在不胜枚 ...

  5. Sprint第二个冲刺（第一天）

    因为人员变动关系,我们的博客推迟了两天发布,希望老师能够谅解. 现在“广商百货”团队项目的新的团队成员组成为:董婷婷(组长).容杰龙.卓炜杰.袁文洪和吴建明 在经过第一轮和几天的休息,现在我们准备开始 ...

  6. 5-1 源码包与RPM包的区别

    1.区别 <1>安装之前的区别:概念上的不同(是否开源等,更多请点我) <2>安装之后的区别:安装位置不同 2.RPM包安装位置 <1>是安装在默认位置中,但不是确 ...

  7. hdu5442（2015长春赛区网络赛1006）后缀数组+KMP /最小表示法？

    题意:给定一个由小写字母组成的长度为 n 的字符串,首尾相连,可以从任意一个字符开始,顺时针或逆时针取这个串(长度为 n),求一个字典序最大的字符串的开始字符位置和顺时针或逆时针.如果有多个字典序最大 ...

  8. hdu1158 dp经典题

    题意:已知雇佣员工花费(h).解雇员工花费(f).员工每月薪水(s),员工未被解雇的话即使未工作也要付薪水,现知道每个月需要几名员工,求最低花费. 很显然,刷 DP 专题的我早早地就意识到这是一道 D ...

  9. 越狱Season 1- Episode 16

    Season 1, Episode 16 -Burrows:Don't be. It's not your fault. 不要,不是你的错 -Fernando: Know what I like? 知 ...

  10. HTML中特殊字符和与之对应的ASCII代码

    ASCII代码是说明了在html中每个特殊字符的属性以及字符的简要说明.在使用html时,如何把ASCII代码添加到网页中.例如版权符号'©'在html中可以通过 "©"来显示. ...