JS實現駭客任務文字下落效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS實現駭客任務文字下落效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

代碼一：

駭客任務文字下落效果

查看效果源碼下載

原始碼如下：

<!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」取消隱藏，看看有多難看！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7644

CakePHP 教程

1392

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

152

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。