JS实现《黑客帝国》落地字母背景
JS实现《黑客帝国》落地字母背景。这个特别有意思,主要是通过设置字符相关属性。控制循环字母距离顶部的高度值,来达到字母不断循环下落的功能。
恩,还有加上一个随机机制,出现各种大小 各个位置 各种颜色 各种长度的效果。
好了,废话不多说,天色已晚,先看代码。
======》先发图,有图才有真相。
===============》以下代码,还是挺好玩的哦。
<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~4str[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~9str[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 οnlοad="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实现《黑客帝国》落地字母背景相关推荐
- canvas黑客帝国数字雨背景 html+css+js
效果(完整源码在最后): [html+css+js]黑客帝国数字雨源码分享 可拿来作页面背景 制作: 定义canvas标签: <canvas id="canvas">& ...
- js 按拼音 首字母 排序 并分组
js 按拼音 首字母 排序 并分组,二话不说 直接上代码: var list = [ { 'name' : '张三', 'py' : 'zhnagsan' ...
- Js根据拼音首字母分组
记录一下Js根据拼音首字母分组的方法 引自https://segmentfault.com/a/1190000017321316 如有侵权请联系. const pySegSort=(arr) => ...
- js 根据汉字首字母排序(省份排序) 或 根据英文首字母排序——za排序 az排序
js 根据汉字首字母排序(省份排序) 或 根据英文首字母排序--z~a排序 & a~z排序 示例1 let arr = ["贵州省", "江苏省", & ...
- 原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
- js拼音排序并按字母分类
js拼音排序并按字母分类,需要String支持localeCompare ie8,firefox,chrome测试通过 function pySegSort(arr,empty) { if(!Stri ...
- js的window.print()打印背景图片,打印背景图片无法显示
js的window.print()打印背景图片 题目描述 js的window,print()打印背景图片给body加了图片地址之后,非要设置浏览器打印选项里面设置背景图形打印才行,怎么通过js去设置默 ...
- html 随机字母,JS简单生成由字母数字组合随机字符串示例
本文实例讲述了JS简单生成由字母数字组合随机字符串.分享给大家供大家参考,具体如下: 前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇 ...
- android去掉png图片灰色背景,JS解决PNG图片灰色背景问题
PNG图片用来制作漂亮的网页背景很实用,此方法也是比较简单的,会让网页增色不少.不过,万恶的IE似乎暗中做对,当你使用PNG图片的时候,IE会自动为PNG图片增加一个灰色背景,这真的好让人烦,那么有没 ...
最新文章
- Python3中raise用法
- WebGIS--ArcGIS for Flex系列开发一:flash builder
- 极客新闻——13、美团到餐研发团队资源成本优化实践
- 引入 ServletContextListener @Autowired null 解决办法
- JTA 深度历险 - 原理与实现
- Django模板:for标签,for标签内置变量forloop
- IDEA搭建Maven Web(SSM)项目(二)——jar包引入、jetty服务器配置和ssm配置
- 华为宣布方舟编译器将开源;​苹果秋季发布会定档9月10日;TypeScript 3.6 发布 | 极客头条...
- 无线网络(预处理+并查集)
- Js中对URL进行转码与解码
- jstat命令查看jvm的GC情况 (以Linux为例)
- 分享几个有趣的Python小项目
- 台式电脑网络连接配置异常_电脑上不了网,360断网急救箱显示网络连接配置和网络存在問題,点击修复。网络连接配置修复了,网络存......
- Excel堆积柱形图制作过程
- 运维团队(OPS)与技术团队有效沟通配合探讨
- Cocos Creator三消小游戏(TS 01版)
- 【python】输出列表元素,以空格/逗号为分隔符
- Java学习之【Object】
- 带宽和网速之间的关系
- nb_samples(采样数)转换
热门文章
- 使用SandCastle和ScriptDoc创建JavaScript文档
- python+itchat 实现微信撤回消息查看
- babel @babel/types API
- 一文快速上手OTA借助平台--W5500平台
- Java高并发秒杀系统总结
- linux编译 mb_string,一起来学学Linux C(一)文件写入
- php理论掌握太少,为了让大家不至于对法系的职业不了解..请看这帖(没耐心的别看了)...
- springfox源码_springfox-swagger原理解析与使用过程中遇到的坑
- 高达坐骑机器人_自带特效的坐骑!新机器人坐骑圆谷迷机师梦!
- ShaderGraph入门教程