web前端學習筆記---實現雪花飄落的效果

標籤：

看了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>

 

web前端學習筆記---實現雪花飄落的效果