今年最后一场“雪”：下雪效果讲解

　　每年年底，特别是在圣诞节，各大网站都玩起了“下雪”。在这弄一个，纪念：今年的结束，新年的开始。也祝福大家在新的一年里越来越好。

　　先看看效果（如果乱码或者不能查看复制下面的代码保存在本地查看）

<!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="https://files.cnblogs.com/files/eyeear/Snowing.js"></script> <script type="text/javascript"> new Snowing({ parent: document.getElementById('snow_box') }); </script> </body> </html>

　　来看下代码，仅供参考

/**
 * 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();
}

　　生成雪花：

　　有了基本的雪花类，可以根据这个类实例化生成雪花，并每隔一段时间生成一个雪花，并把生成的雪花放到一个数组里面。

//...
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);
    }();
}
//...

　　下面是一些细节。

　　创建什么样的雪花

　　一般都会用图片（设计好的雪花图片），有了特殊的雪花字符，可以免去用图片。

　　雪花大小，透明度，向下移动速度，并且有的会向左移动，有的向右边移动，总比直接向下干巴巴的移动好，当然也可以弄成一会向左一会向右。

　　雪花初始出现的位置，x/left: 从0 到页面的宽度减去雪花自身的宽度， y/top: 负雪花的高度

　　雪花移动边界判断

　　每间隔一段时间创建新的雪花，并持续移动，如果不做边界判断删除雪花，那雪花在文档中会越来越多，导致浏览器会卡，所以需要做边界判断并删除超出边界的雪花。

　　雪花向下移动，改变的是雪花对象在文档中的top值，当top值大于浏览器窗口的高度就删除雪花，为了更好，应该是大于浏览器窗口高度加雪花自身的高度。

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

　　向左移动， left值慢慢减少最后小于0，更好的是小于负雪花的宽。

　　向右移动，left值慢慢增加，最后大于浏览器窗口的宽度，更好的是大于浏览器窗口的宽度加雪花自身的宽度。

　　。。。　　

　再见2015，你好2016。

posted @ 2015-12-31 22:39 eyeear 阅读(1067) 评论(3) 编辑收藏举报

刷新页面返回顶部

今年最后一场“雪”：下雪效果讲解

公告