使用javascript實現雪花飄落的效果_javascript技巧

看了javascript網頁特效實例大全中的圖片飄下的效果實例，覺得值得動手學習下。

就把圖片改成雪花圖，完成一個雪花飄下的效果。

並且，其中有些內容比較陳舊了，那麼就學者改掉吧。

包括：

1.對left和top的操作僅支援IE瀏覽器，這咋行，必須得支援chrome。
2.控制圖片下落的過程還要去檢索element，不好吧，那就改成數組維持，直接操作數組中維持的對象，啟動不更快。
3.在文件中加入元素直接改成透過JS程式碼建立元素物件的方式。

實現思路：

1.初始化生成10個div，全都採用絕對定位，每個div中放一個雪花圖片，設定好寬高，並保存在數組中，便於後面下雪的函數直接操作。
2.初始化每個div的橫座標和縱座標，總要給雪花一個下落的起始位置。
3.初始化為每個雪花都設一個縱向的下落步長，一個橫向的擺動步長，這樣每個雪花都會以不同的速度下落和擺動。
4.做一個下雪的函數，每10秒調一下該函數，每調一次該函數，就是控制每個雪花在縱向下落一個自身的步長，橫向的擺動通過正弦函數算出一個正弦值後乘以幅度，這樣雪花下落就是按照正弦波形的方式進行。

圖片可以網路上隨便找。

以下程式碼相容IE8 ，Chrome。

複製程式碼 程式碼如下:

 

以上就是全部程式碼了，效果還是挺棒的，具體的解釋請看註釋，這裡就不多廢話了，希望對大家能有所幫助。