看了javascript網頁特效實例大全中的圖片飄下的效果實例,覺得值得動手學習下。
就把圖片改成雪花圖,完成一個雪花飄下的效果。
並且,其中有些內容比較陳舊了,那麼就學者改掉吧。
包括:
1.對left和top的操作僅支援IE瀏覽器,這咋行,必須得支援chrome。
2.控制圖片下落的過程還要去檢索element,不好吧,那就改成數組維持,直接操作數組中維持的對象,啟動不更快。
3.在文件中加入元素直接改成透過JS程式碼建立元素物件的方式。
實現思路:
1.初始化生成10個div,全都採用絕對定位,每個div中放一個雪花圖片,設定好寬高,並保存在數組中,便於後面下雪的函數直接操作。
2.初始化每個div的橫座標和縱座標,總要給雪花一個下落的起始位置。
3.初始化為每個雪花都設一個縱向的下落步長,一個橫向的擺動步長,這樣每個雪花都會以不同的速度下落和擺動。
4.做一個下雪的函數,每10秒調一下該函數,每調一次該函數,就是控制每個雪花在縱向下落一個自身的步長,橫向的擺動通過正弦函數算出一個正弦值後乘以幅度,這樣雪花下落就是按照正弦波形的方式進行。
圖片可以網路上隨便找。
以下程式碼相容IE8 ,Chrome。
以上就是全部程式碼了,效果還是挺棒的,具體的解釋請看註釋,這裡就不多廢話了,希望對大家能有所幫助。