在用戶滾動時在地圖上繪製圓圈

Question

我想構建一個與此相似的（重複）。只是圈子在地圖上顯示的第一部分。任何想法，我可以開始？任何jQuery插件，這樣做？

https://www.airbnb.com/annual

如果沒有任何插件就可以給予指導我應該在哪裏開始呢？任何例子都很受歡迎。

Answer 1

只需將事件處理程序綁定到scroll事件即可。從$(window).scrollTop()獲取您的位置，並根據需要使用此信息繪製和/或調整您的圓形陣列大小。

有許多方法可以在沒有Canvas的情況下獲得網站效果。您可以使用position:fixed div高的border-radius來創建圈子，並且可以調整它們的大小並使用JQuery重新定位它們。您也可以使用SVG，通過它可以在最初創建半徑爲0的所有圓對象的數組，並通過滾動效果（或數據集）增加或減小半徑。如果您使用畫布，則可能需要準備在每個滾動勾號上重新渲染整個畫布，因爲否則將難以使圓圈「縮小」。這可能會讓你的滾動波濤洶涌，就像它在我的網站上一樣。