【编程游戏】贺岁霓虹灯。(第一名奖励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> <!--meta http-equiv="Content-Type" content="text/html; charset=utf-8" /--> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>霓虹灯---大脚丫---danica</title> <style type="text/css"> *{padding:0;margin:0;} body{ text-align:center; background:#000; } #screen{ width:100%;height:0px; margin:0px auto; overflow:hidden; } .part{ float:left; position:relative; } </style> <script language="javascript"> //创建JS类 function classCreate() { return function() { this.ready.apply(this, arguments); } } //返回页面对象 function $(id) { return ((typeof(id) == "string")? document.getElementById(id) : id); } //获取页面尺寸 function getPageSize() { var _sw = (document.documentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth : document.body.clientWidth; var _sh = (document.documentElement && document.documentElement.clientHeight)? document.documentElement.clientHeight : document.body.clientHeight; return [_sw, _sh] } //设置样式 function setStyle(id, style) { var _obj = $(id); for(each in style) { _obj.style[style[each][0]] = style[each][1]; } } //设置透明度 function setOpacity(id, value) { var _v = (value > 100)? 100 : (value < 0)? 0 : value; var _style = (document.all)? [["filter", "alpha(opacity="+ _v +")"]] : [["opacity", (_v / 100)]]; setStyle(id, _style); } /* /* 霓虹灯 */ var NHD = classCreate(); NHD.prototype = { ready: function(op) { this.zoom = op.zoom; this.size = op.size; this.shapeSize = this._getShapeSize(op.shape); //单个霓虹灯的尺寸 this.list = []; this.show = 0; //正在点亮的霓虹灯 this.hidden = -1; //正在熄灭霓虹灯 this.opacity = 0; this.timeID = null; var _inte = op.inte; var _pageSize = getPageSize(); //获取页页尺寸 this.total = parseInt(_pageSize[0] / (this.shapeSize[0] + this.size + _inte)); //可显示的霓虹灯数量 var _leftShape = this._getShape(op.shape, "left"); var _rightShape = this._getShape(op.shape, "right"); var _screen = $(op.bgID); var _t = parseInt((_pageSize[1] - this.shapeSize[1]) / 2); //霓虹灯与页面上部的距离 setStyle(_screen, [["width", (this.shapeSize[0] + _inte) * this.total +"px"], ["height", this.shapeSize[1] +"px"], ["marginTop", _t +"px"]]); var _part; var _min; for(var i = 0; i < this.total; i++) { _part = document.createElement("div"); _part.className = "part"; _part.id = "part_"+ (i + 1); _screen.appendChild(_part); setStyle(_part, [["width", this.shapeSize[0] + _inte +"px"], ["height", this.shapeSize[1] +"px"]]); setOpacity(_part, 0); this.list.push(_part); _arr = ((i % 2) == 0)? _leftShape : _rightShape; for(var j = 0; j < _arr.length; j++) { _min = document.createElement("div"); var _color = this._setPartColor(); setStyle(_min, [["width", this.size +"px"], ["height", this.size +"px"], ["backgroundColor", _color], ["overflow", "hidden"], ["position", "absolute"], ["left", _arr[j][0] +"px"], ["top", _arr[j][1] +"px"]]); _part.appendChild(_min); } } var _self = this; setInterval(function(){_self.effects()}, 20); }, //霓虹灯特效 effects: function() { if(this.opacity > 100) { this.opacity = 0; this.hidden = (this.show > this.total - 1)? 0 : this.show; this.show = (this.show >= this.total -1)? 0 : this.show + 1; } var _partShow = this.list[this.show]; var _minShow = _partShow.getElementsByTagName("div"); setOpacity(_partShow, this.opacity); if((this.opacity % 10) == 0) { this._minColor(_minShow); } if(this.hidden >= 0) { var _partHidden = this.list[this.hidden]; var _minHidden = _partHidden.getElementsByTagName("div"); setOpacity(_partHidden, (100 - this.opacity)); if((this.opacity % 10) == 0) { this._minColor(_minHidden); } } this.opacity +=2; }, _minColor: function(list) { var _color; for(var i = 0; i < list.length; i++) { _color = this._setPartColor(); setStyle(list[i], [["backgroundColor", _color]]); } }, //获取霓虹灯尺寸 _getShapeSize: function(arr) { var _maxW = 0; var _maxH = 0; for(var i = 0; i < arr.length; i++) { _maxW = (arr[i][0] > _maxW)? arr[i][0] : _maxW; _maxH = (arr[i][1] > _maxH)? arr[i][1] : _maxH; } return [_maxW * this.zoom + this.size, _maxH * this.zoom + this.size]; }, //返回霓虹灯对称形状 _getShape: function(arr, flag) { var _arrTemp = []; for(var i = 0; i < arr.length; i++) { _arrTemp[i] = []; _arrTemp[i][0] = this.zoom * arr[i][0]; _arrTemp[i][1] = (flag == "left")? this.zoom * arr[i][1] : this.shapeSize[1] - this.zoom * arr[i][1]; } return _arrTemp; }, //返回一组颜色值 _setPartColor: function() { var _color = ""; while(_color.length < 6) { var _temp = parseInt((Math.random() * 255)); if(_temp < 60) { _temp = 60; } _color += _temp.toString(16); } return ("#"+ _color); } } </script> </head> <body> <div id="screen"></div> <script language="javascript"> var _op = { //背景元素ID bgID: "screen", //缩放系数 zoom: 0.5, //单个霓虹灯的尺寸(px) size: 2, //霓虹灯的间隔 inte: 20, //霓虹灯形状 shape: [[143, 6], [164, 5], [182, 3], [202, 2], [221, 2], [243, 5], [265, 5], [283, 7], [296, 16], [295, 30], [290, 39], [283, 51], [274, 61], [261, 72], [242, 84], [216, 88], [191, 86], [164, 82], [145, 79], [127, 76], [110, 72], [93, 70], [74, 69], [56, 68], [35, 64], [16, 55], [4, 44], [5, 25], [16, 17], [31, 13], [51, 11], [70, 10], [88, 11], [104, 10], [122, 10]] } var myNHD = new NHD(_op); </script> </body> </html> 参观 [目前Firefox中好使,其他浏览器需复制到本地,存为html文件看效果]