本段代码是在国外的一个博客上看到的,已经没有去记住域名了。效果正如你看到现在的这个博客一样。雪花飘飘,五颜六色的。
至于如何设置,代码中已经详细的说明了。
今天(2016-12-25)将代码进行了一下面向对象的封装,使用这个比较安全。
新的:演示
欢迎在github上Star:https://github.com/kujian/xmas-snow
使用方法请在github上进行查看,代码支持AMD和CMD,今天下午就折腾了这个,这个圣诞节过得很有意义。请点击star支持一下周末的时光。
核心代码:
function Snow(option) { option = option || {}; // Set the number of snowflakes (more than 30 - 40 not recommended) this.snowmax = option.snowmax || 50; // Set the colors for the snow. Add as many colors as you like this.snowcolor = option.snowcolor || new Array("#FFDA65", "#00AADD", "#aaaacc", "#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff", "#bbf7f9"); // Set the fonts, that create the snowflakes. Add as many fonts as you like this.snowtype = option.snowtype || new Array("Times", "Arial", "Times", "Verdana"); // Set the letter that creates your snowflake (recommended: * ) this.snowletter = option.snowletter || "*"; // Set the speed of sinking (recommended values range from 0.3 to 2) this.sinkspeed = option.sinkspeed || 0.6; // Set the maximum-size of your snowflakes this.snowmaxsize = option.snowmaxsize || 30; // Set the minimal-size of your snowflakes this.snowminsize = option.snowminsize || 8; // Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing this.snowingzone = option.snowingzone || 1; /////////////////////////////////////////////////////////////////////////// this.snow = new Array(); this.marginbottom; this.marginright; this.timer; this.i_snow = 0; this.x_mv = new Array(); this.crds = new Array(); this.lftrght = new Array(); this.browserinfos = window.navigator.userAgent; this.ie5 = document.all && document.getElementById && !this.browserinfos.match(/Opera/); this.ns6 = document.getElementById && !document.all; this.opera = this.browserinfos.match(/Opera/); this.browserok = this.ie5 || this.ns6 || this.opera; //start snow this.startSnow(); } Snow.prototype.randommaker = function(range) { var rand = Math.floor(range * Math.random()); return rand; } Snow.prototype.initsnow = function() { if (this.ie5 || this.opera) { this.marginbottom = document.body.scrollHeight; this.marginright = document.body.clientWidth - 15; } else if (this.ns6) { this.marginbottom = document.body.scrollHeight; this.marginright = window.innerWidth - 15; } this.snowsizerange = this.snowmaxsize - this.snowminsize; for (var i = 0; i <= this.snowmax; i++) { this.crds[i] = 0; this.lftrght[i] = Math.random() * 15; this.x_mv[i] = 0.03 + Math.random() / 10; this.snow[i] = document.getElementById("s" + i); this.snow[i].style.fontFamily = this.snowtype[this.randommaker(this.snowtype.length)]; this.snow[i].size = this.randommaker(this.snowsizerange) + this.snowminsize; this.snow[i].style.fontSize = this.snow[i].size + 'px'; this.snow[i].style.color = this.snowcolor[this.randommaker(this.snowcolor.length)]; this.snow[i].style.zIndex = 1000; this.snow[i].sink = this.sinkspeed * this.snow[i].size / 5; if (this.snowingzone == 1) { this.snow[i].posx = this.randommaker(this.marginright - this.snow[i].size) } if (this.snowingzone == 2) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) } if (this.snowingzone == 3) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) + this.marginright / 4 } if (this.snowingzone == 4) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) + this.marginright / 2 } this.snow[i].posy = this.randommaker(2 * this.marginbottom - this.marginbottom - 2 * this.snow[i].size); this.snow[i].style.left = this.snow[i].posx + 'px'; this.snow[i].style.top = this.snow[i].posy + 'px'; } this.movesnow(); } Snow.prototype.movesnow = function() { for (var i = 0; i <= this.snowmax; i++) { this.crds[i] += this.x_mv[i]; this.snow[i].posy += this.snow[i].sink; this.snow[i].style.left = this.snow[i].posx + this.lftrght[i] * Math.sin(this.crds[i]) + 'px'; this.snow[i].style.top = this.snow[i].posy + 'px'; if (this.snow[i].posy >= this.marginbottom - 2 * this.snow[i].size || parseInt(this.snow[i].style.left) > (this.marginright - 3 * this.lftrght[i])) { if (this.snowingzone == 1) { this.snow[i].posx = this.randommaker(this.marginright - this.snow[i].size) } if (this.snowingzone == 2) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) } if (this.snowingzone == 3) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) + this.marginright / 4 } if (this.snowingzone == 4) { this.snow[i].posx = this.randommaker(this.marginright / 2 - this.snow[i].size) + this.marginright / 2 } this.snow[i].posy = 0; } } // var timer=setTimeout("movesnow()",50); var that = this; var timer = window.setTimeout(function() { that.movesnow(); }, 50); } Snow.prototype.createSnow = function() { var body = document.getElementsByTagName('body')[0]; for (var i = 0; i <= this.snowmax; i++) { var content = document.createElement("span"); content.id = 's' + i; content.style.position = "absolute"; content.style.top = "-" + this.snowmaxsize; content.innerHTML = this.snowletter; body.appendChild(content); // document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } } Snow.prototype.startSnow = function() { this.createSnow(); if (this.browserok) { this.initsnow(); } }
旧的:演示
旧的代码:
<!-- xmas_snow [ start ] --> <script type="text/javascript"> // Set the number of snowflakes (more than 30 - 40 not recommended) var snowmax=50 // Set the colors for the snow. Add as many colors as you like var snowcolor=new Array("#FFDA65","#00AADD","#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff","#bbf7f9") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Times","Arial","Times","Verdana") // Set the letter that creates your snowflake (recommended: * ) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 to 2) var sinkspeed=0.6 // Set the maximum-size of your snowflakes var snowmaxsize=30 // Set the minimal-size of your snowflakes var snowminsize=8 // Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=1 /////////////////////////////////////////////////////////////////////////// var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight marginright = document.body.clientWidth-15 } else if (ns6) { marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+'px'; snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+'px'; snow[i].style.top=snow[i].posy+'px'; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px'; snow[i].style.top=snow[i].posy+'px'; if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } </script>