【编程游戏】贺岁霓虹灯。(第一名奖励10000可用分) 效果图 评分 参观 [目前Firefox中好使,其他浏览器需复制到本地,存为html文件看效果] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> 贺岁霓虹灯 -- 星星点灯 -- 作者:Click_Me</title> <style type="text/css"> body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background-color:#000; left:0; top:0; width:100%; height:100%;} span {position: absolute; font-family: verdana; text-align: center; font-weight: bold;} </style> <script type="text/javascript"> if ('undefined' != typeof HTMLElement && HTMLElement.prototype && !HTMLElement.prototype.insertAdjacentHTML) HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) { var df; var r = this.ownerDocument.createRange(); if (String(sWhere).toLowerCase() == 'afterbegin') { r.setStartBefore(this); df = r.createContextualFragment(sHTML); this.insertBefore(df, this.firstChild); } }; var $extend = function(a, b) { for(var c in b) { a[c] = b[c]; } return a; }; // 动作辅助 var zOOm = function(){ with(this) { k += .1; document.title = OS.length; for(var i = 0, len = OS.length; i < len; i++) { t = min + max + Math.cos(k + i / amp) * max; with(OS[i].style) { zIndex = Math.round(t * 10); top = Math.round(-t / chu) + 'px'; fontSize = Math.round(t) + 'px'; c = t * 200 / (2 * max + min); if(inv) c = 255 - c; color = 'RGB(' + Math.floor(Math.random()* (c * R)) + ',' + Math.floor(Math.random()*(c * G)) + ',' + Math.floor(Math.random()*(c * B)) + ')'; } } setTimeout(sto, 16); } }; //霓虹灯模板 var object = new Array(); var Neon = function(N, O, T, options){ if(!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; this.k = 0; this.t = 0; this.N = N; this.O = O; this.T = T; $extend(this, this.setOptions(options)); this.createFX(); }; Neon.prototype = { setOptions: function(options) { this.options = { R: 2, // Red G: 0, // Green B: 2, // Blue amp: 1.2, min: 25, max: 50, inv: 1, chu: 0.8 }; return $extend(this.options, options || {}); }, createFX: function(){ var _len = this.T.length, _html = '', _c, _this = this; for(var i = 0; i < _len; i++) { _c = this.T.charAt(i); _html = '<span style="left: ' + Math.round(this.min * i * 1.5)+'px">' + '<div style="position:absolute;left:-150px;width:300px;">' + _c + '</div></span>'; this.O.insertAdjacentHTML('afterbegin', _html); } this.OS = this.O.getElementsByTagName('span'); this.zOOm = zOOm; this.sto = 'object[' + this.N + '].zOOm();'; setTimeout(_this.sto, 32); } }; </script> </head> <body> <span style="position:absolute;left:50%;top:50%"> <span id="T1" style="position: absolute; top: 0px; left:-200px; width: 400px"></span> <span id="T2" style="position: absolute; top: 0px; left:-200px; width: 400px"></span> </span> <script> // 构造星星之火 object[0] = new Neon(0, document.getElementById("T1"),"☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆",{amp:1.2,min:15,max:30,R:5,G:8,B:2,inv:1,chu:0.8}); object[1] = new Neon(1, document.getElementById("T2"),"☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆",{amp:1.2,min:15,max:30,R:5,G:8,B:2,inv:1,chu:6.4}); </script> </body> </html> 参观 [目前Firefox中好使,其他浏览器需复制到本地,存为html文件看效果]