博客园___黑客帝国背景样式
黑客帝国背景样式
CSS代码:
/*黑客帝国背景CSS样式*/ #matrixBG{ position: fixed; top:0; left: 0; z-index: -1; opacity:0.8; }
HTML部分
建议写在首页HTML代码栏中
(PS:js部分需要jquery-1.11.0.js支持)
/*黑客帝国背景HTML*/ <div id="page_end_html"> <div><canvas id="matrixBG" ></canvas></div> </div> /*黑客帝国JS样式*/ <script > // JavaScript Document $(document).ready(function(){ //var s=window.screen; var width = matrixBG.width = window.screen.width; var height = matrixBG.height = window.screen.height; var yPositions = Array(300).join(0).split(\'\'); var ctx=matrixBG.getContext(\'2d\'); var fonts1 = "可ㄅㄆㄇㄈㄪㄉㄊㄋㄌㄍㄎ艹ㄫㄏㄐㄑㄬㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟ大ㄠㄡㄢㄣㄤㄥㄦㄧㄨㄩ"; var fonts2 = "钅彡圭卌廾爫丷糹川忄冖辶弋刂冫灬祭豕"; var fonts = fonts1 + fonts2; //var fonts="12345AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz67890"; //console.log( fonts ); var draw = function () { ctx.fillStyle=\'rgba(0,0,0,.05)\'; ctx.fillRect(0,0,width,height); ctx.fillStyle=\'#0F0\'; ctx.font = \'10pt Georgia\'; // ctx.font = \'10pt Nano\'; yPositions.map(function(y, index){ // text = String.fromCharCode(30+Math.floor( Math.random()*95 )); var rand = Math.floor( Math.random()* fonts.length ); var text = fonts.substr( rand, 1); x = (index * 10)+10; matrixBG.getContext(\'2d\').fillText(text, x, y); if(y > 100 + Math.random()*1e4) { yPositions[index]=0; } else { yPositions[index] = y + 10; } }); }; RunMatrix(); function RunMatrix() { if(typeof Game_Interval != "undefined") clearInterval(Game_Interval); Game_Interval = setInterval(draw, 33); } function StopMatrix() { clearInterval(Game_Interval); } /** //setInterval(draw, 33); $("button#pause").click(function(){ StopMatrix();}); $("button#play").click(function(){RunMatrix();}); */ }); </script>
版权声明:本文为cainiao-chuanqi原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。