这是我参与更文挑战的第4天，活动详情查看： 更文挑战
前言
南方的夏季，真的好热。如果你的她无理取闹，想看雪怎么办？
em...我们得满足她，我们可以试着给她的下一场雪
思路
为了方便阅读，我将文章简单分成两部分
首先找了一个之前某精英官网，以它满屏雪花为例。选它主要是个人觉得挺好看的。如下
看人家怎么写
首先，查看一下HTML
从上图可以得出几个结论
- 每一片雪花对应一个
img元素，并且所有的雪花都是同一张图片 - 通过
js动态控制雪花的大小及位置，而且我们可以猜测出，雪花的数量应该也是由js控制的
接着，找到“下雪”相关代码
snow()
/*雪花飘落*/
function snow() {
$(document).snowfall({
image: "//game.gtimg.cn/images/gp/web201908/flake_black.png",
flakeCount: 50,
minSpeed: 0.7,
minSize: 3,
maxSize: 20,
});
setTimeout(function () {
$('#element').snowfall('clear');
}, 300000000);
}
通过上述源码，我们可以得出：核心函数snow需要依靠snowfall函数。并且我们可以猜测，snowfall可能是由jQuery或者基于jQuery的一个插件提供的。
另外，可以看到snowfall可以接受一个字符串，也可以接受一个对象作为参数。我们可以进一步猜测，如果接受一个字符串clear作为参数是表示扫雪。如果接受一个对象，image表示img元素的src，flakeCount表示雪花数量，minspeed表示最小速度，minSize表示最小尺寸，maxSize表示生成雪花的最大尺寸，除此之外应该还有其他配置
为了验证我的说法，我去查找snowfall
可以看到
(1) 引入了一个snowfall.jquery.min.js的文件
(2) 引入了jQuery-1.9.1.min.js
确实进一步验证了我的猜测：snowfall可能是由jQuery或者基于jQuery的一个插件提供的
了解jQuery的伙伴都知道jQuery中并没有snowfall方法，所以snowfall就是由snowfall.jquery.min.js提供的
但我想去看看snowfall源码，找了两分钟，在github了解了它的详细使用。
并且选项确实跟我们猜测的那样，下面是所有配置选项
flakeCount,flakeColor,flakeIndex,minSize,maxSize,minSpeed,maxSpeed, round, shadow
关于snowfall的更多详情可移步到snowfall
经上述我们明白了它满屏雪花实现原理，其实就是利用snowfall函数来批量生成指定数量的不同大小、不同下落速度的雪花。下面我们就借用snowfall来实现自己的全屏雪花
模拟实现全屏雪花
了解了原理，模拟起来就很简单，只是调用一个函数。代码如下
<!DOCTYPE html>
<html lang="zh">
<style>
body {
background-color: #add8e6;
}
</style>
<body></body>
<script src="./jquery.min.js"></script>
<script src="./snowfall.jquery.js"></script>
<script>
$(document).snowfall({
image: "images/flake_black.png",
flakeCount: 20,
minSpeed: 0.7,
minSize: 3,
maxSize: 20,
});
</script>
</html>
代码效果如下
上面效果是鹅毛雪，如果想让雪下大一点，可以改变雪的数量 如：
flakeCount: 100
除此之外可以将速度加快一点，大雪纷飞,如：
flakeCount: 150，
minSpeed: 3
还可以有很多效果，比如换雪花样式，可以根据需要多多尝试。
据说女孩都喜欢认真的男孩，当她看到的时候，一定很感动！
别谢我，我是个好人
end
1.代码已上传到个人github
2.对snowfall感兴趣的，可以读读snowfall源码
3.原创不易，欢迎点赞、收藏、评论
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！