JS实现《黑客帝国》落地字母背景。这个特别有意思，主要是通过设置字符相关属性。控制循环字母距离顶部的高度值，来达到字母不断循环下落的功能。

恩，还有加上一个随机机制，出现各种大小 各个位置 各种颜色 各种长度的效果。

好了，废话不多说，天色已晚，先看代码。

======》先发图，有图才有真相。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwNTkyMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

===============》以下代码，还是挺好玩的哦。

<HTML>

<HEAD>

<TITLE>黑客帝国</TITLE>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</HEAD>

<style type="text/css">

body

{

overflow:hidden;

margin:0;

background-color:#000000;

font-family:宋体;

}

DIV.#heike

{

overflow:hidden;

position:relative;

top:5%;

width:90%;

height:90%;

border-style:solid;

border-width:1;

border-color:#009900;

}

</style>

<script type="text/javascript">

var strCount;

var str;

var Color;

var Font;

var sLine = "1<br>0<br>0<br>.<br>1<br>0<br>1<br>1<br>1<br>.<br>0<br>O<br>1<br>1<br>0<br>1<br>1";

function OnLoad()

{

strCount = 60;

str = [];

Color = [];

Font = [];

Color[0] = "#002211";//文字的颜色

Color[1] = "#003311";

Color[2] = "#005511";

Color[3] = "#008811";

Color[4] = "#00BB99";

Color[5] = "#114411";

Color[6] = "#335566";

Color[7] = "#668899";

Color[8] = "#99BBAA";

Color[9] = "#CECECC";

Font[0] = "20px";    //文字的大小

Font[1] = "12px";

Font[2] = "24px";

Font[3] = "36px";

Font[4] = "48px";

setTimeout("strik()",100);

}

function strik()

{

for(var i=0;i<strCount;i++)

{

   if(typeof(str[i]) != "undefined")   //假设字符串存在

   {

    if(str[i]["Carch"].style.pixelTop > heike.clientHeight)

    {

     str[i]["Carch"].outerHTML = "";

     delete str[i]["Level"];//删除数组元素

     delete str[i]["Speed"];

     delete str[i]["Carch"];

     delete str[i];

    }

    else

    {

     str[i]["Carch"].style.pixelTop += str[i]["Speed"];//距离顶部的高度等于累加上Speed的值

    }

   }

   else if(Math.random()<0.25)             //随机小数

   {

    str[i] = new Array();

    str[i]["Level"] = Math.round(Math.random()*4);  //0~4

    str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+5;//(0~16)+5  后面加的数字越小。字母下路的速度越慢

    document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");//加入字母的出现区域

    str[i]["Carch"] = document.all["SPAN_"+i];

    str[i]["Carch"].style.fontSize = Font[str[i]["Level"]];             //字体

    str[i]["Carch"].style.position = "absolute";                        //位置

    str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth); //x坐标

    str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight;                 //y坐标

    str[i]["Carch"].style.color = Color[str[i]["Level"]+5];                         //颜色0~9

    str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=5)";//滤镜效果 glow(color=+#988fff,5)

    str[i]["Carch"].style.zIndex = str[i]["Level"];    //z-Index 堆砌次序

   }

}

setTimeout("strik()",50);

}

</script>

<BODY onload="OnLoad()">

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td align="center" height="100%"><div id="heike"></div></td></tr>

</table>

</BODY>

</HTML>

OK。今天就到这里了，睡觉去啊。有兴趣的能够试着玩一玩，多改进下，会有意想不到的效果哦。

喜欢小弟就关注我一下吧。

JS实现《黑客帝国》落地字母背景的更多相关文章

  1. DD_belatedPNG.js解决透明PNG图片背景灰色问题

    <!--[]> <script type="text/javascript" src="http://www.phpddt.com/usr/themes ...

  2. js实现黑客帝国二进制雨

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<对于RegExp反向引用的一点理解> 作者主页:myvin 博主QQ:851399101(点击QQ和博 ...

  3. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  4. 用JS制作博客页面背景随滚动渐变的效果

    今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...

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

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

  6. JS点击更换网页背景颜色

    JS部分 <script type="text/javascript"> // 定义可换的颜色 var colors = ["#ff0000", & ...

  7. JS获取汉字首字母

    //获取 汉字首字母 function makePy(str) { if (typeof (str) != "string") throw new Error(-1, " ...

  8. js输出26个字母两种方法(js fromCharCode的使用)

    方法一 var character = new Array("A","B","C","D","E", ...

  9. JS根据屏幕分辨率改变背景宽高

    //控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...

随机推荐

  1. 【前端开发】禁止微信内置浏览器调整字体大小的方法js

    微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功 ...

  2. Python_oldboy_自动化运维之路（三）

    本节内容 列表,元组,字典 字符串操作 copy的用法 文件操作 1.列表,元组,字典 [列表] 1.定义列表 names = ['Alex',"Tenglan",'Eric'] ...

  3. JS验证表单中TEXT文本框中是否含有非法字符

    <form id="form" action="" method="post"> <input type="hi ...

  4. matlab设定mex接驳的C/C++编译器

    使用C/C++编写核心算法,使用matlab调用算法.做上层封装,通常是提升效率并提供易用性的一个不错的选择. mex需要设定接驳的C/C++编译器,官方文档在这里:https://ww2.mathw ...

  5. day5作业购物商城+ATM

    模拟实现一个ATM + 购物商城程序 1.额度 15000或自定义 2.实现购物商城,买东西加入购物车,调用信用卡接口结账 3.可以提现,手续费5% 4.每月22号出账单,每月10号为还款日,过期未还 ...

  6. 【LOJ】#2028. 「SHOI2016」随机序列

    题解 我们发现只有从第一个往后数,用乘号联通的块是有贡献的 为什么,因为后面所有表达式 肯定会有 + ,还会有个-,贡献全都被抵消了 所以我们处理出前缀乘积,然后乘上表达式的方案数 答案就是\(\su ...

  7. Linux下 rz 和 sz 命令的安装与使用

    目录 Linux下 rz 和 sz 命令的安装与使用 rz/sz命令的安装 sz命令-发送文件到本地(下载): rz命令-本地上传文件到服务器(上传): 声明 Linux下 rz 和 sz 命令的安装 ...

  8. Python 爬虫个人记录（一）豆瓣电影250

    一.爬虫环境 Python3.6 scrapy1.4 火狐浏览器 qq浏览器 二.scrapy shell 测试并获取 xpath 1.进入scrapy shell 2 .获取html fetch(' ...

  9. 相等（==）、严格相等（===）、NaN、null、undefined、空和0

    (===)如果两个引用值指向同一个对象.数组.或函数,则他们是相等的.如果指向不同的对象,则他们是不相等的,尽管两个对象具有完全一样的属性. (==)如果其中一个值是true,则将其转换为1再进行比较 ...

  10. Stream中reduce()使用记录

    一.reduce()使用1.第一个参数是我们给出的初值,2.第二个参数是累加器,可以自己用实现接口完成想要的操作,这里使用Bigdecimal的add方法 3.最后reduce会返回计算后的结果 Bi ...