首頁 > web前端 > js教程 > 使用javascript實現雪花飄落的效果_javascript技巧

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

WBOY
發布: 2016-05-16 16:20:20
原創
1259 人瀏覽過

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

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

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

包括:

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

實現思路:

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

圖片可以網路上隨便找。

以下程式碼相容IE8 ,Chrome。

複製程式碼 程式碼如下:


 

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板