给你的网站加一个圣诞雪花

本段代码是在国外的一个博客上看到的,已经没有去记住域名了。效果正如你看到现在的这个博客一样。雪花飘飘,五颜六色的。

至于如何设置,代码中已经详细的说明了。

今天(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>

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流