生活随笔
收集整理的這篇文章主要介紹了
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>
總結
以上是生活随笔為你收集整理的Js黑客帝国效果 文字下落 制作过程和思路的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
