您的位置：首页 > 其它

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

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

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

<!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>

　　来看下代码，仅供参考

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


查看完整代码
　　创建一个雪花的类，这个雪花类表示每一片雪花，它有雪花的一些基本的属性和移动方法。

//...
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。

　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航