使用javascript實(shí)現(xiàn)雪花飄落的效果
看了javascript網(wǎng)頁(yè)特效實(shí)例大全中的圖片飄下的效果實(shí)例,覺(jué)得值得動(dòng)手學(xué)習(xí)下。
就把圖片改成雪花圖,完成一個(gè)雪花飄下的效果。
并且,其中有些內(nèi)容比較陳舊了,那么就學(xué)者改掉吧。
包括:
1.對(duì)left和top的操作僅支持IE瀏覽器,這咋行,必須得支持chrome。
2.控制圖片下落的過(guò)程還要去檢索element,不好吧,那就改成數(shù)組維持,直接操作數(shù)組中維持的對(duì)象,啟不更快。
3.向文檔中添加元素直接改成通過(guò)JS代碼創(chuàng)建元素對(duì)象的方式。
實(shí)現(xiàn)思路:
1.初始化生成10個(gè)div,全都采用絕對(duì)定位,每個(gè)div中放一個(gè)雪花圖片,設(shè)置好寬高,并保存在數(shù)組中,便于后面下雪的函數(shù)直接操作。
2.初始化每個(gè)div的橫坐標(biāo)和縱坐標(biāo),總要給雪花一個(gè)下落的起始位置吧。
3.初始化為每個(gè)雪花都設(shè)一個(gè)縱向的下落步長(zhǎng),一個(gè)橫向的擺動(dòng)步長(zhǎng),這樣每個(gè)雪花都會(huì)以不同的速度下落和擺動(dòng)。
4.做一個(gè)下雪的函數(shù),每10秒調(diào)一下該函數(shù),每調(diào)一次該函數(shù),就是控制每個(gè)雪花在縱向下落一個(gè)自身的步長(zhǎng),橫向的擺動(dòng)通過(guò)正弦函數(shù)算出一個(gè)正弦值后乘以幅度,這樣雪花下落就是按照正弦波形的方式進(jìn)行。
圖片可以網(wǎng)上隨便找。
以下代碼兼容IE8+,Chrome。
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//圖片的過(guò)程中,橫坐標(biāo)的軌跡是以一點(diǎn)為中心的正弦曲線
//利用了setTimeout函數(shù)完成了動(dòng)畫的功能
//圖片
var snowsrc="雪花.png"
//雪花個(gè)數(shù)
var no = 10;
//聲明變量,xp表示橫坐標(biāo),yp表示縱坐標(biāo)>
var dx, xp, yp;
//聲明變量,am表示左右擺動(dòng)的幅度,stx表示橫坐標(biāo)的偏移步長(zhǎng),sty表示縱坐標(biāo)的步長(zhǎng)>
var am, stx, sty;
{
//獲取當(dāng)前窗口的寬度
clientWidth = document.body.clientWidth;
//獲取當(dāng)前窗口的高度
clientHeight = document.body.clientHeight;
}
var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var stx = new Array();
var sty = new Array();
var snowFlakes = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
//第i個(gè)圖片的橫坐標(biāo)初始值
xp[i] = Math.random()*(clientWidth-50);
yp[i] = Math.random()*clientHeight;//第i個(gè)圖片的縱坐標(biāo)初始值
am[i] = Math.random()*20; //第i個(gè)圖片的左右擺動(dòng)的幅度
stx[i] = 0.02 + Math.random()/10; //第i個(gè)圖片x方向的步長(zhǎng)
sty[i] = 0.7 + Math.random(); //第i個(gè)圖片y方向的步長(zhǎng)
//生成一個(gè)容納雪花圖片的div,并設(shè)置其絕對(duì)坐標(biāo)
var snowFlakeDiv = document.createElement('div');
snowFlakeDiv.setAttribute('id', 'dot'+ i);
snowFlakeDiv.style.position = 'absolute';
snowFlakeDiv.style.top = 15;
snowFlakeDiv.style.left = 15;
//生成一個(gè)雪花圖片對(duì)象,設(shè)置寬高,并加入div
var snowFlakeImg = document.createElement('img');
snowFlakeImg.setAttribute('src', snowsrc);
snowFlakeImg.style.width = 30;
snowFlakeImg.style.height = 30;
//將雪花div加入到document中,并通過(guò)數(shù)組保存
snowFlakeDiv.appendChild(snowFlakeImg);
document.body.appendChild(snowFlakeDiv);
snowFlakes[i] = snowFlakeDiv;
}
function snow() {
for (i = 0; i < no; ++ i) {
//第i個(gè)圖片的縱坐標(biāo)加上步長(zhǎng)
yp[i] += sty[i];
//如果新坐標(biāo)超過(guò)了屏幕下沿,重置該圖片的信息,包括橫坐標(biāo)、縱坐標(biāo)以及x方向的步長(zhǎng)和y方向的步長(zhǎng)
if (yp[i] > clientHeight-50) {
//重新賦值圖片的橫坐標(biāo)
xp[i] = Math.random()*(clientWidth-am[i]-30);
//重新賦值圖片的縱坐標(biāo)
yp[i] = 0;
}
dx[i] += stx[i];//dx變量加上一個(gè)步長(zhǎng)
//直接操作數(shù)組中對(duì)應(yīng)的雪花div
var snowFlakeDiv = snowFlakes[i];
//更新圖片的縱坐標(biāo)
snowFlakeDiv.style.top = yp[i];
//更新圖片的橫坐標(biāo)
snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
//設(shè)定動(dòng)畫刷新的時(shí)間周期
setTimeout("snow()", 10);
}
//調(diào)用snowIE()函數(shù)
snow();
</script>
</BODY>
以上就是全部代碼了,效果還是挺棒的,具體的解釋請(qǐng)看注釋,這里就不多廢話了,希望對(duì)大家能有所幫助。
相關(guān)文章
Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解
這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽
這篇文章主要為大家介紹了JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽,F(xiàn)ile API將極大地方便 Web 端的文件上傳等操作,本文將介紹 File API的概況,并用兩個(gè)實(shí)例展示File API的應(yīng)用,感興趣的小伙伴們可以參考一下2016-02-02javascript獲取本機(jī)操作系統(tǒng)類型的方法
關(guān)于我們使用電腦的操作系統(tǒng),我們通過(guò)鼠標(biāo)點(diǎn)擊就能獲取,如果我們想用腳本怎么實(shí)現(xiàn)javascript獲取本機(jī)操作系統(tǒng)類型的方法呢,下面給大家分享javascript獲取本機(jī)操作系統(tǒng)類型的方法,需要的朋友可以參考下2015-08-08TypeScript裝飾器與反射元數(shù)據(jù)實(shí)例詳解
TypeScript的裝飾器為我們提供了一種強(qiáng)大的工具,可以在運(yùn)行時(shí)改變類的行為,通過(guò)理解裝飾器的工作原理,我們可以創(chuàng)造更加強(qiáng)大、靈活且易于維護(hù)的應(yīng)用,這篇文章主要介紹了TypeScript裝飾器與反射元數(shù)據(jù),需要的朋友可以參考下2023-09-09js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08js使用文件流下載csv文件的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于js使用文件流下載csv文件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07JavaScript實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格某行時(shí)此行變色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格某行時(shí)此行變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11