天气热了,她想看雪怎么办?

我心飞翔 分类:javascript

这是我参与更文挑战的第4天,活动详情查看: 更文挑战

前言

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

em...我们得满足她,我们可以试着给她的下一场雪

思路

为了方便阅读,我将文章简单分成两部分

首先找了一个之前某精英官网,以它满屏雪花为例。选它主要是个人觉得挺好看的。如下

截图来源于某精英官网

看人家怎么写

首先,查看一下HTML

从上图可以得出几个结论

  1. 每一片雪花对应一个img元素,并且所有的雪花都是同一张图片
  2. 通过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元素的srcflakeCount表示雪花数量,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.原创不易,欢迎点赞、收藏、评论

回复

我来回复
  • 暂无回复内容