使用javascript實現(xiàn)雪花飄落的效果_javascript技巧
來源:懂視網(wǎng)
責(zé)編:小采
時間:2020-11-27 21:31:56
使用javascript實現(xiàn)雪花飄落的效果_javascript技巧
使用javascript實現(xiàn)雪花飄落的效果_javascript技巧:看了javascript網(wǎng)頁特效實例大全中的圖片飄下的效果實例,覺得值得動手學(xué)習(xí)下。 就把圖片改成雪花圖,完成一個雪花飄下的效果。 并且,其中有些內(nèi)容比較陳舊了,那么就學(xué)者改掉吧。 包括: 1.對left和top的操作僅支持IE瀏覽器,這咋行,必須得支持chrom
導(dǎo)讀使用javascript實現(xiàn)雪花飄落的效果_javascript技巧:看了javascript網(wǎng)頁特效實例大全中的圖片飄下的效果實例,覺得值得動手學(xué)習(xí)下。 就把圖片改成雪花圖,完成一個雪花飄下的效果。 并且,其中有些內(nèi)容比較陳舊了,那么就學(xué)者改掉吧。 包括: 1.對left和top的操作僅支持IE瀏覽器,這咋行,必須得支持chrom

看了javascript網(wǎng)頁特效實例大全中的圖片飄下的效果實例,覺得值得動手學(xué)習(xí)下。
就把圖片改成雪花圖,完成一個雪花飄下的效果。
并且,其中有些內(nèi)容比較陳舊了,那么就學(xué)者改掉吧。
包括:
1.對left和top的操作僅支持IE瀏覽器,這咋行,必須得支持chrome。
2.控制圖片下落的過程還要去檢索element,不好吧,那就改成數(shù)組維持,直接操作數(shù)組中維持的對象,啟不更快。
3.向文檔中添加元素直接改成通過JS代碼創(chuàng)建元素對象的方式。
實現(xiàn)思路:
1.初始化生成10個div,全都采用絕對定位,每個div中放一個雪花圖片,設(shè)置好寬高,并保存在數(shù)組中,便于后面下雪的函數(shù)直接操作。
2.初始化每個div的橫坐標(biāo)和縱坐標(biāo),總要給雪花一個下落的起始位置吧。
3.初始化為每個雪花都設(shè)一個縱向的下落步長,一個橫向的擺動步長,這樣每個雪花都會以不同的速度下落和擺動。
4.做一個下雪的函數(shù),每10秒調(diào)一下該函數(shù),每調(diào)一次該函數(shù),就是控制每個雪花在縱向下落一個自身的步長,橫向的擺動通過正弦函數(shù)算出一個正弦值后乘以幅度,這樣雪花下落就是按照正弦波形的方式進行。
圖片可以網(wǎng)上隨便找。
以下代碼兼容IE8+,Chrome。
代碼如下:
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
使用javascript實現(xiàn)雪花飄落的效果_javascript技巧
使用javascript實現(xiàn)雪花飄落的效果_javascript技巧:看了javascript網(wǎng)頁特效實例大全中的圖片飄下的效果實例,覺得值得動手學(xué)習(xí)下。 就把圖片改成雪花圖,完成一個雪花飄下的效果。 并且,其中有些內(nèi)容比較陳舊了,那么就學(xué)者改掉吧。 包括: 1.對left和top的操作僅支持IE瀏覽器,這咋行,必須得支持chrom