效果图
评分
参观 [目前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></title> </head> <body style="background-color: #000000"> <script type="text/javascript"> var $ = function(s) { return typeof s === 'string' ? document.getElementById(s) : s; }; var ad = function() { this.colours = [ '#ff0000', '#00ff00', '#3366ff', '#ff00ff', '#ffa500', '#ffffff', '#fff000', '#ff00ff', '#00ff00', '#3366ff', '#ff00ff', '#ff00ff', '#ff0000', '#ff00ff', '#ffffff', '#00ff00', '#fff000', '#00ff00', '#ff0000', '#00ff00', '#3366ff', '#ff00ff', '#ffffff', '#ffa500', '#fff000', '#ff00ff', '#00ff00' ]; this.txts = ['新年快乐', '恭喜发财', '万事如意', '身体健康']; this.YgetDelay = 0; this.XgetDelay = 0; this.Ydelay = 0; this.Xdelay = 0; this.step = 0.2; this.currStep = 0; this.mx = 0; this.ini = 1; this.gstep = 1; this.getColor = function() { return this.colours[Math.round(Math.random() * (this.colours.length - 1))] }; this.getText = function() { return this.txts[Math.round(Math.random() * (this.txts.length - 1))] }; this.pos = { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 }; } ad.prototype.init = function() { var amount = this.colours.length; var box = document.createElement("div"); box.style.position = 'absolute'; box.style.top = this.pos.y + "px"; box.style.left = this.pos.x + "px"; document.body.appendChild(box); this.items = []; for (i = 0; i < amount; i++) { var item = document.createElement("div"); this.items.push(item); item.id = 'items'; item.style.position = 'absolute'; item.style.top = '0px'; item.style.left = '0px'; item.style.height = '50px'; item.style.width = '50px'; item.style.color = this.colours[i]; item.style.paddingTop = '20px'; item.style.fontFamily = 'Courier New'; item.style.fontSize = '5px'; item.style.textAlign = 'center'; item.innerHTML = '.'; box.appendChild(item); } this.drawTxt(); this.changeTxt(); this.start(); this.glow(); } ad.prototype.drawTxt = function() { var txt = document.createElement("div"); txt.style.position = 'absolute'; txt.style.left = (this.pos.x - txt.offsetWidth / 2) + 'px'; txt.style.top = (this.pos.y - txt.offsetHeight / 2) + 'px'; document.body.appendChild(txt); this.txt = txt; } ad.prototype.changeTxt = function() { this.txt.style.color = this.getColor(); this.txt.innerHTML = this.getText(); this.txt.style.left = (this.pos.x - this.txt.offsetWidth / 3) + 'px'; this.txt.style.top = (this.pos.y - this.txt.offsetHeight / 4) + 'px'; var m = this; setTimeout(function() { m.changeTxt(); }, 2000); } ad.prototype.dim = function() { this.ini -= this.gstep; var m = this; var dt = setTimeout(function() { m.dim(); }, 10); if (this.ini < 2) { clearTimeout(dt); this.glow(); } } ad.prototype.glow = function() { this.ini += this.gstep; var m = this; var gt = setTimeout(function() { m.glow(); }, 10); if (this.ini > 14) { clearTimeout(gt); this.dim(); } } ad.prototype.delay = function() { for (i = 0; i < this.colours.length; i++) { var layer = this.items[i].style; layer.filter = 'glow(color=' + this.colours[i] + ', strength=' + this.ini + ')'; layer.top = this.Ydelay + 50 * Math.sin((5 * Math.sin((this.currStep - 15.99) / 10)) + i * 70) + "px"; layer.left = this.Xdelay + 180 * Math.cos((5 * Math.sin((this.currStep - 15.99) / 10)) + i * 70) + "px"; } this.currStep += this.step; } ad.prototype.start = function() { this.Ydelay = this.YgetDelay += (this.YgetDelay) * 1 / 20; this.Xdelay = this.XgetDelay += (this.XgetDelay) * 1 / 20; this.delay(); var m = this; setTimeout(function() { m.start(); }, 10); } var a = new ad(); a.init(); </script> </body> </html>
参观 [目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]
4878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
