广州网站建设总结,页面好看的教育类网站模板,泰安公司做网站,营销型网站建设合同模板效果预览: http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/ Js黑客帝国效果 文字向下落制作过程和思路 1.css控制文字竖显示 2.动态添加div 用随机数当文本 3.获取分辨率 把div随机分布到屏幕里 4.随机文字的大小和透明度 5.用setInterval定时替换文本 改变div的top值 6.定…效果预览: 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 HTML2 html langen3 head4 meta http-equivContent-Type contenttext/html; charsetutf-8 /5 titleJs黑客帝国效果 文字向下落/title6 style typetext/css7 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 typetext/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
