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 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
vue视图不更新情况详解
May 16 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
微信小程序实现文件预览
Oct 22 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
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
PHP4实际应用经验篇(6)
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
使用console进行性能测试
2015/04/27 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python logging模块的使用详解
2020/10/23 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
大学新生军训感言
2014/02/25 职场文书
亲属关系公证书
2014/04/08 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
python编写五子棋游戏
2021/05/25 Python
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
python单向链表实例详解
2022/05/25 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL