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 相关文章推荐
javascript下利用arguments实现string.format函数
Aug 24 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php以post形式发送xml的方法
2014/11/04 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
简单谈谈json跨域
2016/03/13 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
清除输入框内的空格
2016/12/21 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
python的id()函数介绍
2013/02/10 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
庆七一活动方案
2014/01/25 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python