天冷了,没啥本事给大家下个雪吧
不多逼逼直接上代码
//代码基于jquery随意引入一个版本就好了
(function ($) {
$.fn.snow = function (options) {
//构建你的雪花
var $flake = $('<div id = "snowbox"/>').css({ 'position': 'absolute', 'top'20%', 'z-index': '9999' }).html('❄'),
$flakePC = $('<div id = "snowbox"/>').css({ 'position': 'absolute', 'top': '120%', 'z-index': '9999' }).html('❄'),
//获取屏幕宽高
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
// 雪花最小、最大尺寸、出现频率、雪花颜色、PCor移动端
minSize: 10,
maxSize: 20,
newOn: 500,
flakeColor: "#AFDAEF",
type: 1
},
// 将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
options = $.extend({}, defaults, options);
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。关于数量和时间都要定时函数来实现
var interval = setInterval(function () {
//随机出现于x轴
var startPositionLeft = Math.random() * documentWidth,
//随机透明度
startOpacity = 0.5 + Math.random(),
//随机大小
sizeFlake = options.minSize + Math.random() * options.maxSize,
//结束y轴位置
endPositionTop = documentHeight,
//结束x轴位置
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
//自由下落持续时间
durationFall = documentHeight * 10 + Math.random() * 5000;
//为了适配
if (options.type == 1) {
$flakePC.clone().appendTo('body').css({left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake,color: options.flakeColor}).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall, 'linear', function () {$(this).remove()});
} else {
$flake.clone().appendTo('body').css({left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake,color: options.flakeColor}).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall, 'linear', function () {$(this).remove()});}}, options.newOn);
};
})(jQuery);
$(function () {
let type = null
//简单的判断屏幕宽度
if ($(document).width() < 700) {
type = 0
} else {
type = 1
}
$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 300,
type: type
});
});
效果展示,没做gif有机会补上
PS:修复几个小bug
//结束y轴位置
endPositionTop = documentHeight - 55,
//要减去flake本身的大小不然会出现屏幕的抖动
//简单使用可以使用overflow:hidden
$(this).remove()
//删除的是jquery对象如果要html里删除要使用
$(this).detach()