今年最後一場「雪」：下雪效果講解

時間 2019-12-11

標籤今年最後一場下雪效果講解简体版

原文原文鏈接

　　每一年年末，特別是在聖誕節，各大網站都玩起了「下雪」。在這弄一個，記念：今年的結束，新年的開始。也祝福你們在新的一年裏愈來愈好。javascript

　　先看看效果（若是亂碼或者不能查看複製下面的代碼保存在本地查看）css

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>下雪</title> <style type="text/css"> *{margin: 0;padding: 0;} body{overflow-x: hidden;} .snow_box{width: 100%; position: fixed; left: 0; top: 0; z-index: 999;} .snow{position: fixed; top:-60px; color: #fff; z-index: 80;} </style> </head> <body> <div style="height:500px;background: #000;"></div> <div style="height:500px;background: #f00;"></div> <div class="snow_box" id="snow_box"></div> <script type="text/javascript" src="http://files.cnblogs.com/files/eyeear/Snowing.js"></script> <script type="text/javascript"> new Snowing({ parent: document.getElementById('snow_box') }); </script> </body> </html> html

　　來看下代碼，僅供參考java

/**
 * LBS Snowing
 * Date: 2014-12-24
 * ==================================
**/
(function(exports) {
    function snow(opts) {
        opts = opts || {};
        this.parent = opts.parent; //插入到哪裏
        this.speedY = opts.speedY || 5; //向下移動的速度
        this.speedX = opts.speedX || 0; //左或者右移動的速度
        this.name = opts.name || 'snow'; //用類名添加樣式
        this.html = opts.html || '❄'; //不要圖片 用了特殊字符表示雪花
        this.size = opts.size || '12'; //雪花大小
        // this.color = opts.color || '#fff'; //雪花顏色
        this.x = opts.x; //雪花的x座標 對應 left
        this.y = opts.y; //雪花的y座標 對應 top
        this.opacity = opts.opacity || 50; //雪花的透明度(0-100)
        this.div = null; //雪花在HTML文檔中的引用對象
        // 雪花移動
        this.move = function() {
            this.div.style.top = this.div.offsetTop + this.speedY + 'px';
            this.div.style.left = this.div.offsetLeft + this.speedX + 'px';
        };
        // 雪花初始化
        this.init = function() {
            this.div = document.createElement('div');
            this.div.style.fontSize = this.size + 'px';
            // this.div.style.color = this.color;
            this.div.innerHTML = this.html;
            this.div.className = this.name;
            this.div.style.left = this.x + 'px';
            this.div.style.top = this.y + 'px';
            this.div.style.opacity = this.opacity / 100;
            this.div.style.filter = 'alpha(opacity=' + this.opacity + ')';
            this.parent.appendChild(this.div);
        };
        this.init();
    }
    exports.Snowing = function(opts) {
        opts = opts || {};
        this.parent = opts.parent || document.getElementsByTagName('body')[0];
        this.count = 0;
        this.snows = [];
        this.timer = null;
        this.init();
    };
    Snowing.prototype = {
        init: function() {
            this.start();
        },
        create: function() {
            return new snow({
                parent: this.parent,
                speedY: this.random(3, 10),
                speedX: this.random(-3, 3),
                size: this.random(20, 60),
                opacity: this.random(35, 90),
                x: this.random(0, this.width - 60),
                y: -60
            });
        },
        createSnow: function() {
            if (this.count % 5 === 0) {
                this.snows.push(this.create());
            }
        },
        moveSnow: function() {
            if (this.snows.length < 1) return;
            for (var i = 0, len = this.snows.length; i < len; i++) {
                this.snows[i].move();
                if (this.snows[i].div.offsetTop > this.height || this.snows[i].div.offsetLeft < -60 || this.snows[i].div.offsetLeft > this.width + 60) {
                    this.parent.removeChild(this.snows[i].div);
                    this.snows.splice(i, 1);
                    len--;
                }
            }
        },
        start: function() {
            var _this = this;
            this.css();
            !function start() {
                _this.count++;
                _this.createSnow();
                _this.moveSnow();
                _this.timer = setTimeout(start, 17);
            }();
        },
        css: function() {
            var d = document,
                doc = d.documentElement,
                body = d.body;
            this.width = doc.clientWidth;
            this.height = doc.clientHeight;
            if (d.compatMode != "CSS1Compat") {
                this.width = body.clientWidth;
                this.height = body.clientHeight;
            }
            console.log(this.width +'////'+ this.height)
        },
        random: function(min, max) {
            return (Math.random() * (max - min + 1) + min) >> 0;
        }
    };
}(window));

查看完整代碼

　　建立一個雪花的類，這個雪花類表示每一片雪花，它有雪花的一些基本的屬性和移動方法。數組

function snow(opts) {
	opts = opts || {};
	this.parent = opts.parent; //插入到哪裏
	this.speedY = opts.speedY || 5; //向下移動的速度
	this.speedX = opts.speedX || 0; //左或者右移動的速度
	this.name = opts.name || 'snow'; //用類名添加樣式
	this.html = opts.html || '❄'; //不要圖片 用了特殊字符表示雪花
	this.size = opts.size || '12'; //雪花大小
	// this.color = opts.color || '#fff'; //雪花顏色
	this.x = opts.x; //雪花的x座標 對應 left
	this.y = opts.y; //雪花的y座標 對應 top
	this.opacity = opts.opacity || 50; //雪花的透明度(0-100)
	this.div = null; //雪花在HTML文檔中的引用對象
	// 雪花移動
	this.move = function() {
		this.div.style.top = this.div.offsetTop + this.speedY + 'px';
		this.div.style.left = this.div.offsetLeft + this.speedX + 'px';
	};
	// 雪花初始化
	this.init = function() {
		this.div = document.createElement('div');
		this.div.style.fontSize = this.size + 'px';
		// this.div.style.color = this.color;
		this.div.innerHTML = this.html;
		this.div.className = this.name;
		this.div.style.left = this.x + 'px';
		this.div.style.top = this.y + 'px';
		this.div.style.opacity = this.opacity / 100;
		this.div.style.filter = 'alpha(opacity=' + this.opacity + ')';
		this.parent.appendChild(this.div);
	};
	this.init();
}

　　生成雪花：瀏覽器

　　有了基本的雪花類，能夠根據這個類實例化生成雪花，並每隔一段時間生成一個雪花，並把生成的雪花放到一個數組裏面。app

//...
create: function() {
    return new snow({
        parent: this.parent,
        speedY: this.random(3, 10), 
        speedX: this.random(-3, 3),
        size: this.random(20, 60),
        opacity: this.random(35, 90),
        x: this.random(0, this.width - 60),
        y: -60
    });
},
createSnow: function() {
    if (this.count % 5 === 0) {
        this.snows.push(this.create());
    }
}
//...

　　移動雪花：dom

　　遍歷雪花數組，執行每個雪花的移動方法，讓雪花根據設定的速度移動，並作邊界判斷，雪花超出邊界就從數組中刪除這個雪花，在文檔中也刪除雪花對象。ide

//...    
moveSnow: function() {
    if (this.snows.length < 1) return;
    for (var i = 0, len = this.snows.length; i < len; i++) {
        this.snows[i].move();
        if (this.snows[i].div.offsetTop > this.height || this.snows[i].div.offsetLeft < -60 || this.snows[i].div.offsetLeft > this.width + 60) {
            this.parent.removeChild(this.snows[i].div);
            this.snows.splice(i, 1);
            len--;
        }
    }
}
//...

　　持續建立、移動雪花網站

　　既然是下雪，確定不是隻下一片雪花，會下不少的雪花。每隔一段時間建立、移動雪花，保持雪花永遠在下的假象。

start: function() {
    var _this = this;
    this.css();
    !function start() {
        _this.count++;
        _this.createSnow();
        _this.moveSnow();
        _this.timer = setTimeout(start, 17);
    }();
}
//...

　　下面是一些細節。

　　建立什麼樣的雪花

　　通常都會用圖片（設計好的雪花圖片），有了特殊的雪花字符，能夠免去用圖片。

　　雪花大小，透明度，向下移動速度，而且有的會向左移動，有的向右邊移動，總比直接向下乾巴巴的移動好，固然也能夠弄成一會向左一會向右。

　　雪花初始出現的位置，x/left: 從0 到頁面的寬度減去雪花自身的寬度， y/top: 負雪花的高度

　　雪花移動邊界判斷

　　每間隔一段時間建立新的雪花，並持續移動，若是不作邊界判斷刪除雪花，那雪花在文檔中會愈來愈多，致使瀏覽器會卡，因此須要作邊界判斷並刪除超出邊界的雪花。

　　雪花向下移動，改變的是雪花對象在文檔中的top值，當top值大於瀏覽器窗口的高度就刪除雪花，爲了更好，應該是大於瀏覽器窗口高度加雪花自身的高度。

　　雪花向下移動時也同時向左或者向右移動，左右移動的速度值比向下移動速度值小。

　　向左移動， left值慢慢減小最後小於0，更好的是小於負雪花的寬。

　　向右移動，left值慢慢增長，最後大於瀏覽器窗口的寬度，更好的是大於瀏覽器窗口的寬度加雪花自身的寬度。

　　。。。　　