js仿黑客帝国字母掉落效果代码分享


Posted in Javascript onNovember 08, 2020

看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果“I love you”,你可以稍加修改,在情人节,用来对你的恋人表白哦~

运行效果图:

js仿黑客帝国字母掉落效果代码分享

大家也动手运行一下,                                      ----------------效果演示----------------

为大家分享js仿黑客帝国字母掉落效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS仿黑客帝国字母掉落效果</title>
<style type=text/css>
.matrix{padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0px; width: 10px; padding-top: 0px; font-family: lucida console, courier, monotype; text-align: center}
</style>
</head>
<body>
<center>JS仿黑客帝国字母掉落效果</center><br><center>

<SCRIPT language=JavaScript type=text/javascript>
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
 if (!w3c && !ie45) return
 var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
 ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
 ma_txt=" "+ma_txt+" ";
 columns=ma_txt.length;
 if (w3c) {
 while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
 ma_tab=document.createElement("table");
 ma_tab.setAttribute("border", 0);
 ma_tab.setAttribute("align", effectalign);
 ma_tab.style.backgroundColor="#000000";
 ma_bod=document.createElement("tbody");
 for (x=0; x<rows; x++) {
 ma_row=document.createElement("tr");
 for (y=0; y<columns; y++) {
 matemp=document.createElement("td");
 matemp.setAttribute("id", "Mx"+x+"y"+y);
 matemp.className="matrix";
 matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
 ma_row.appendChild(matemp);
 }
 ma_bod.appendChild(ma_row);
 }
 ma_tab.appendChild(ma_bod);
 matrix.appendChild(ma_tab);
 } else {
 ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
 for (var x=0; x<rows; x++) {
 ma_tab+='<t'+'r>';
 for (var y=0; y<columns; y++) {
 ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'">?</'+'td>';
 }
 ma_tab+='</'+'tr>';
 }
 ma_tab+='</'+'table>';
 matrix.innerHTML=ma_tab;
 }
 ma_cho=ma_txt;
 for (x=0; x<columns; x++) {
 ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
 m_copo[x]=0;
 }
 ma_bod=setInterval("mytricks()", speed);
}

function mytricks() {
 x=0;
 for (y=0; y<columns; y++) {
 x=x+(m_copo[y]==100);
 ma_row=m_copo[y]%100;
 if (ma_row && m_copo[y]<100) {
 if (ma_row<rows+1) {
 if (w3c) {
 matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
 matemp.firstChild.nodeValue=m_coch[y];
 }
 else {
 matemp=document.all["Mx"+(ma_row-1)+"y"+y];
 matemp.innerHTML=m_coch[y];
 }
 matemp.style.color="#33ff66";
 matemp.style.fontWeight="bold";
 }
 if (ma_row>1 && ma_row<rows+2) {
 matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
 matemp.style.fontWeight="normal";
 matemp.style.color="#00ff00";
 }
 if (ma_row>2) {
 matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
 matemp.style.color="#009900";
 }
 if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
 else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
 else if (ma_row<rows+2) m_copo[y]++;
 else if (m_copo[y]<100) m_copo[y]=0;
 }
 else if (Math.random()>0.9 && m_copo[y]<100) {
 m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
 m_copo[y]++;
 }
 }
 if (x==columns) clearInterval(ma_bod);
}

function zoomer(ycol) {
 var mtmp, mtem, ytmp;
 if (m_copo[ycol]==Math.floor(rows/2)+1) {

 for (ytmp=0; ytmp<rows; ytmp++) {
 if (w3c) {
 mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
 mtmp.firstChild.nodeValue=m_coch[ycol];
 }
 else {
 mtmp=document.all["Mx"+ytmp+"y"+ycol];
 mtmp.innerHTML=m_coch[ycol];
 }
 mtmp.style.color="#33ff66";
 mtmp.style.fontWeight="bold";
 }
 if (Math.random()<reveal) {
 mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
 ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
 }
 if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
 m_copo[ycol]+=199;
 setTimeout("zoomer("+ycol+")", speed);
 }
 else if (m_copo[ycol]>200) {
 if (w3c) {
 mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
 mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
 }
 else {
 mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
 mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
 }
 mtmp.style.fontWeight="normal";
 mtem.style.fontWeight="normal";
 setTimeout("zoomer("+ycol+")", speed);
 }
 else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
 if (m_copo[ycol]>100 && m_copo[ycol]<200) {
 if (w3c) {
 mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
 mtmp.firstChild.nodeValue=String.fromCharCode(160);
 mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
 mtem.firstChild.nodeValue=String.fromCharCode(160);
 }
 else {
 mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
 mtmp.innerHTML=String.fromCharCode(160);
 mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
 mtem.innerHTML=String.fromCharCode(160);
 }
 setTimeout("zoomer("+ycol+")", speed);
 }
}
// -->
</SCRIPT>
<div id=matrix>I love u</div>

</center>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
vue实现树状表格效果
Dec 29 Vue.js
JS模拟并美化的表单控件完整实例
Aug 19 #Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 #Javascript
js实现当前输入框高亮显示的方法
Aug 19 #Javascript
jQuery实现的仿select功能代码
Aug 19 #Javascript
You might like
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php反射应用示例
2014/02/25 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
spyder常用快捷键(分享)
2017/07/19 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
自荐信范文
2013/12/10 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Python进程间的通信之语法学习
2022/04/11 Python