在用户滚动时在地图上绘制圆圈

Question

我想构建一个与此相似的（重复）。只是圈子在地图上显示的第一部分。任何想法，我可以开始？任何jQuery插件，这样做？

https://www.airbnb.com/annual

如果没有任何插件就可以给予指导我应该在哪里开始呢？任何例子都很受欢迎。

Answer 1

只需将事件处理程序绑定到scroll事件即可。从$(window).scrollTop()获取您的位置，并根据需要使用此信息绘制和/或调整您的圆形阵列大小。

有许多方法可以在没有Canvas的情况下获得网站效果。您可以使用position:fixed div高的border-radius来创建圈子，并且可以调整它们的大小并使用JQuery重新定位它们。您也可以使用SVG，通过它可以在最初创建半径为0的所有圆对象的数组，并通过滚动效果（或数据集）增加或减小半径。如果您使用画布，则可能需要准备在每个滚动勾号上重新渲染整个画布，因为否则将难以使圆圈“缩小”。这可能会让你的滚动波涛汹涌，就像它在我的网站上一样。