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

前端技术 2023/09/03 JavaScript

代码一：

黑客帝国文字下落效果

查看效果     源码下载

源代码如下：

<!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”取消隐藏，看看有多难看！。。。。。)

本文地址：https://www.stayed.cn/item/6171

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案