Js黑客帝国效果 文字下落 制作过程和思路

效果预览:

http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/

Js黑客帝国效果 文字向下落制作过程和思路

1.css控制文字竖显示
2.动态添加div 用随机数当文本
3.获取分辨率 把div随机分布到屏幕里
4.随机文字的大小和透明度
5.用setInterval定时替换文本 改变div的top值
6.定时生产div 当div移出显示范围时删除

效果不错 缺点就是太消耗资源
chrome ie运行不错 ff有点卡

 1 <!DOCTYPE HTML>
 2 <html lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Js黑客帝国效果 文字向下落</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黑客帝国效果 文字向下落制作过程和思路
16 
17     1.css控制文字竖显示
18     2.动态添加div 用随机数当文本 
19     3.获取分辨率 把div随机分布到屏幕里
20     4.随机文字的大小和透明度
21     5.用setInterval定时替换文本 改变div的top值
22     6.定时生产div 当div移出显示范围时删除
23 
24     效果不错 缺点就是太消耗资源
25     chrome ie运行不错 ff有点卡
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>
posted @ 2012-08-02 17:26  dtdxrk  阅读(1300)  评论(0)  编辑  收藏  举报