看了javascript網頁特效實例大全中的圖片飄下的效果實例，覺得值得動手學習下。
就把圖片改成雪花圖，完成一個雪花飄下的效果。
并且，其中有些內容比較陳舊了，那么就學者改掉吧。
包括：
1.對left和top的操作僅支持IE瀏覽器，這咋行，必須得支持chrome。
2.控制圖片下落的過程還要去檢索element，不好吧，那就改成數組維持，直接操作數組中維持的對象，啟不更快。
3.向文檔中添加元素直接改成通過JS代碼創建元素對象的方式。
實現思路：
1.初始化生成10個div，全都采用絕對定位，每個div中放一個雪花圖片，設置好寬高，并保存在數組中，便于后面下雪的函數直接操作。
2.初始化每個div的橫坐標和縱坐標，總要給雪花一個下落的起始位置吧。
3.初始化為每個雪花都設一個縱向的下落步長，一個橫向的擺動步長，這樣每個雪花都會以不同的速度下落和擺動。
4.做一個下雪的函數，每10秒調一下該函數，每調一次該函數，就是控制每個雪花在縱向下落一個自身的步長，橫向的擺動通過正弦函數算出一個正弦值后乘以幅度，這樣雪花下落就是按照正弦波形的方式進行。
圖片可以網上隨便找。
以下代碼兼容IE8+，Chrome。
復制代碼代碼如下:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//圖片的過程中，橫坐標的軌跡是以一點為中心的正弦曲線
//利用了setTimeout函數完成了動畫的功能
//圖片
var snowsrc="雪花.png"
//雪花個數
var no = 10;
//聲明變量，xp表示橫坐標，yp表示縱坐標>
var dx, xp, yp;
//聲明變量，am表示左右擺動的幅度，stx表示橫坐標的偏移步長，sty表示縱坐標的步長>
var am, stx, sty;
{
//獲取當前窗口的寬度
clientWidth = document.body.clientWidth;
//獲取當前窗口的高度
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個圖片的橫坐標初始值
xp[i] = Math.random()*(clientWidth-50);
yp[i] = Math.random()*clientHeight;//第i個圖片的縱坐標初始值
am[i] = Math.random()*20; //第i個圖片的左右擺動的幅度
stx[i] = 0.02 + Math.random()/10; //第i個圖片x方向的步長
sty[i] = 0.7 + Math.random(); //第i個圖片y方向的步長
//生成一個容納雪花圖片的div，并設置其絕對坐標
var snowFlakeDiv = document.createElement('div');
snowFlakeDiv.setAttribute('id', 'dot'+ i);
snowFlakeDiv.style.position = 'absolute';
snowFlakeDiv.style.top = 15;
snowFlakeDiv.style.left = 15;
//生成一個雪花圖片對象，設置寬高，并加入div
var snowFlakeImg = document.createElement('img');
snowFlakeImg.setAttribute('src', snowsrc);
snowFlakeImg.style.width = 30;
snowFlakeImg.style.height = 30;
//將雪花div加入到document中，并通過數組保存
snowFlakeDiv.appendChild(snowFlakeImg);
document.body.appendChild(snowFlakeDiv);
snowFlakes[i] = snowFlakeDiv;
}
function snow() {
for (i = 0; i < no; ++ i) {
//第i個圖片的縱坐標加上步長
yp[i] += sty[i];
//如果新坐標超過了屏幕下沿，重置該圖片的信息，包括橫坐標、縱坐標以及x方向的步長和y方向的步長
if (yp[i] > clientHeight-50) {
//重新賦值圖片的橫坐標
xp[i] = Math.random()*(clientWidth-am[i]-30);
//重新賦值圖片的縱坐標
yp[i] = 0;
}
dx[i] += stx[i];//dx變量加上一個步長
//直接操作數組中對應的雪花div
var snowFlakeDiv = snowFlakes[i];
//更新圖片的縱坐標
snowFlakeDiv.style.top = yp[i];
//更新圖片的橫坐標
snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
//設定動畫刷新的時間周期
setTimeout("snow()", 10);
}
//調用snowIE()函數
snow();
</script>
</BODY>
以上就是全部代碼了，效果還是挺棒的，具體的解釋請看注釋，這里就不多廢話了，希望對大家能有所幫助。
