JS实现黑客帝国文字下落效果


Posted in Javascript onSeptember 01, 2015

代码一:

黑客帝国文字下落效果

JS实现黑客帝国文字下落效果

查看效果     源码下载

源代码如下:

<!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>

代码二:

在一个JS的学习资料上,看到一个关于黑客帝国文字下落的特效!挺好玩的,贴个源码分享一下!

<HTML>
<HEAD>
 <TITLE>《黑客帝国》中的字符下落效果</TITLE>
 <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</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 language="javascript">
var strCount;
var str;
var Color;
var Font;
var sLine = "0<br/>1<br/>0<br/>1<br/>0<br/>0<br/>1<br/>0<br/>1<br/>0<br/>";
function OnLoad()
{
 strCount = 40;
 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] = "10px";           //文字的大小
 Font[1] = "12px"; 
 Font[2] = "14px";
 Font[3] = "16px";
 Font[4] = "18px";
 setTimeout("strik()",50); }
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"];
   }
  }
  else if(Math.random()<0.25)        //随机小数
  {
   str[i] = new Array();
   str[i]["Level"] = Math.round(Math.random()*4);
   str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"]) <<2)+50;
   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];                   //颜色
   str[i]["Carch"].style.filter = "glow(Color="+Color[str[i] ["Level"]]+",Strength=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>
<tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以IE 为核心的浏览器浏览本页,1024*768分辨率为佳</td></tr>
</table> 
 </BODY>
</HTML>

提示:重点是对颜色和速度的随机设置。JavaScript中的“Math”对象用来提供数学运算,其中“Math.random”用来获取一个0到1之间的随机数。“Math.round”是采用四舍五入方式取得最接近的整数。代码中使用了两维数组,“delete”方法用来删除数组中的元素。

( 你可以自己去修改参数看看对应的效果,如:JS中关于文字下降速度控制的变量Speed,可以将其调的大一些,让它更快些;还可以修改CSS样式里溢出属性“overflow”取消隐藏,看看有多难看!。。。。。)

Javascript 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
javascript类型转换示例
Apr 29 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 #Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 #Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 #Javascript
JavaScript常用标签和方法总结
Sep 01 #Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 #Javascript
You might like
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python中的默认参数详解
2015/06/24 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Django CBV类的用法详解
2019/07/26 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
康拓普公司Java笔面试
2016/09/23 面试题
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
初中英语教学反思
2014/01/25 职场文书
市场安全管理制度
2014/01/26 职场文书
访谈节目策划方案
2014/05/15 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
商业门面租房协议书
2014/11/25 职场文书
护理实习生带教计划
2015/01/16 职场文书
幼师中班个人总结
2015/02/12 职场文书
房产电话营销开场白
2015/05/29 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
PHP中->和=>的意思
2021/03/31 PHP
react中props 的使用及进行限制的方法
2021/04/28 Javascript
SQL基础的查询语句
2021/11/11 MySQL
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python