效果预览:
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>
)
