起因
在逛博客时,偶然间看到一篇使用JS实现雪花特效的博文。仔细研究代码后发现其中的原因并不复杂,就有点类似于之前做过的生成星星案例以及发射子弹的案例的结合,于是就将其添加到了网站
思路
- 每个雪花其实就是一个动态生成的div,其相对于页面绝对定位
- 雪花的初始位置top值为负的自身的高度,left值随机,大小随机
- 给每个雪花添加动画,让其从页面顶部匀速运动到页面底部,动画时间随机,动画结束移除自身
代码实现
(function ($) {
$.fn.snow = function (options) {
var $flake = $('<div class="snowbox" />').css({
'position': 'absolute',
'z-index': '9999',
'top': '-50px'
}).html('❄');
documentHeight = $(document).height();
documentWidth = $(document).width();
defaults = {
minSize: 6,
maxSize: 10,
newOn: 1000,
flakeColor: "#fff" /* 此处可以定义雪花颜色 */
};
options = $.extend({}, defaults, options);
var interval = setInterval(function () {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 1,
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('#snow').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.8
}, durationFall, 'linear', function () {
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
// 调用snow函数
$.fn.snow({
minSize: 15,
/* 定义雪花最小尺寸 */
maxSize: 30,
/* 定义雪花最大尺寸 */
newOn: 800 /* 定义密集程度,数字越小越密集 */
});