天气热了，她想看雪怎么办？

去去去去去去

已于 2022-05-23 08:40:50 修改

阅读量571

点赞数 1

文章标签： javascript jquery 开发语言

于 2021-08-03 14:25:15 首次发布

本文链接：https://blog.csdn.net/Rainydaysqu/article/details/119349235

版权

前言

南方的夏季，真的好热。如果你的她无理取闹，想看雪怎么办？

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
复制代码

还可以有很多效果，比如换雪花样式，可以根据需要多多尝试。

据说女孩都喜欢认真的男孩，当她看到的时候，一定很感动！

别谢我，我是个好人

去去去去去去

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
天气热了，她想看雪怎么办？

前言南方的夏季，真的好热。如果你的她无理取闹，想看雪怎么办？em...我们得满足她，我们可以试着给她的下一场雪思路为了方便阅读，我将文章简单分成两部分首先找了一个之前某精英官网，以它满屏雪花为例。选它主要是个人觉得挺好看的。如下看人家怎么写首先，查看一下HTML从上图可以得出几个结论每一片雪花对应一个img元素，并且所有的雪花都是同一张图片通过js动态控制雪花的大小及位置，而且我们可以猜测出，雪花的数量应该也是由js控制的接着，找到“下雪”相关代码
复制链接

扫一扫