本帖最后由 aa77dd@163.com 于 2015-7-24 01:18 编辑
请将下面代码保存为 HTML 文件运行, 本代码在最新版 Chrome 和 Firefox 浏览器中测试通过, 未考虑低版本浏览器(特别是IE)的兼容性
演示地址 http://a7d.net46.net/matrix.html- <!DOCTYPE html>
- <html>
- <head>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: content-box;
- }
- #pg {
- position: absolute;
- width: 100%;
- height: 100%;
- font-size: 0px;
- background-color: black;
- overflow: hidden;
- }
- #pg>div {
- display: inline-block;
- text-align: center;
- position: absolute;
- width: 1em;
- line-height: 1em;
- height: 100%;
- color: green;
- font-size: 15px;
- font-weight: bold;
- }
- a {
- color: #eeffee;
- font-weight: bold;
- }
- </style>
- </head>
- <body>
- <div id=pg>
- <div></div>
- </div>
- <audio>
- <source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">
- </audio>
- </body>
- </html>
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
- <!-- <script src="JS/jquery-1.10.2.min.js"></script> -->
- <script>
- $('audio')[0].play();
- // $('#pg>div').css("height", $('#pg').css("height"));
- $('#pg>div').height($('#pg').height());
- var wid = $("#pg>div").width();
- var sum = Math.ceil($('#pg').width() / wid);
- $('#pg').html(new Array(sum + 1).join("<div></div>"));
- var t_life = Array(sum + 1).join(0).split('');
- var life = [], hei = [], Yg = [], Yc = [], Y_born = [];
- $("#pg>div").map(function (index) {
- $(this).css("left", (wid * index) + 'px');
- });
- var hei_page = Math.ceil($("#pg>div").height() / wid);
- var full_blank = Array(hei_page + 1).join(' <br>');
- window.setInterval('tick();', 30);
- function tick() {
- $("#pg>div").map(function (i) {
- if (+t_life[i] <= 0) {
- $(this).html(full_blank);
- hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);
- Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));
- life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);
- t_life[i] = hei[i] + life[i];
- }
- t_life[i]--, life[i]--, hei[i]--;
- var t, j;
- if (life[i] < 0) {
- t = $(this).html();
- j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1));
- Yc[i]++;
- }
- if (hei[i] >= 0) {
- t = $(this).html();
- var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>';
- if (Yg[i] == Y_born[i]) {
- $(this).html(t.slice(0, Yg[i] * 5) + drill);
- } else {
- j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill);
- }
- Yg[i]++;
- } else if (hei[i] == -1) {
- t = $(this).html();
- j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));
- }
- });
- }
- </script>
复制代码
|