生活随笔
收集整理的這篇文章主要介紹了
Js黑客帝国效果 文字下落 制作过程和思路
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果預(yù)覽:
http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/
Js黑客帝國(guó)效果 文字向下落制作過(guò)程和思路
1.css控制文字豎顯示
2.動(dòng)態(tài)添加div 用隨機(jī)數(shù)當(dāng)文本
3.獲取分辨率 把div隨機(jī)分布到屏幕里
4.隨機(jī)文字的大小和透明度
5.用setInterval定時(shí)替換文本 改變div的top值
6.定時(shí)生產(chǎn)div 當(dāng)div移出顯示范圍時(shí)刪除
效果不錯(cuò) 缺點(diǎn)就是太消耗資源
chrome ie運(yùn)行不錯(cuò) ff有點(diǎn)卡
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Js黑客帝國(guó)效果 文字向下落
</title>
6 <style type="text/css">
7 body{background-color: #000;margin:0;padding:0;font-family:Arial;color: #008800;line-height: 0.9;overflow: hidden;}
8 div{width: 5px;word-wrap:break-word;position: absolute;}
9 </style>
10
11 <body>
12
13 <script type="text/javascript">
14 /*
15 Js黑客帝國(guó)效果 文字向下落制作過(guò)程和思路
16
17 1.css控制文字豎顯示
18 2.動(dòng)態(tài)添加div 用隨機(jī)數(shù)當(dāng)文本
19 3.獲取分辨率 把div隨機(jī)分布到屏幕里
20 4.隨機(jī)文字的大小和透明度
21 5.用setInterval定時(shí)替換文本 改變div的top值
22 6.定時(shí)生產(chǎn)div 當(dāng)div移出顯示范圍時(shí)刪除
23
24 效果不錯(cuò) 缺點(diǎn)就是太消耗資源
25 chrome ie運(yùn)行不錯(cuò) ff有點(diǎn)卡
26 */
27 var TheMatrix = {
28 height : window.screen.height, //瀏覽器高
29 width : window.screen.width, //瀏覽器寬
30 speed : 35, //下降速度
31 createDIV : function(){ //生成div
32 var div = document.createElement("div");
33 var posy = 0;
34 div.style.left = Math.round(Math.random()*TheMatrix.width) +"px";
35 div.style.fontSize = Math.round(Math.random()*50) +"px";
36 div.style.opacity = Math.random().toFixed(1);
37 div.innerHTML = Math.round(Math.random()*100000000000000000);
38 document.body.appendChild(div);
39 var moveDIV = setInterval(function(){
40 //alert(posy);
41 div.innerHTML = Math.round(Math.random()*100000000000000000);
42 div.style.top = posy - TheMatrix.height + "px";
43 posy += TheMatrix.speed;
44 if(parseInt(div.style.top) > TheMatrix.height){
45 document.body.removeChild(div);
46 clearInterval(moveDIV);
47 }
48 }, 20);
49 }
50 }
51 setInterval("TheMatrix.createDIV()",50)
52
53 </script>
54
55 </body>
56 </html>
總結(jié)
以上是生活随笔為你收集整理的Js黑客帝国效果 文字下落 制作过程和思路的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
