使用javascript實現(xiàn)雪花飄落的效果

更新時間：2015年01月13日 14:22:43 投稿：hebedich

本文主要介紹了使用javascript實現(xiàn)雪花飄落的特效，雖然網(wǎng)上有很多，不過都是比較陳舊了，兼容性不是太好，于是動手寫一個，把思路和實現(xiàn)代碼都分享給大家。

看了javascript網(wǎng)頁特效實例大全中的圖片飄下的效果實例，覺得值得動手學習下。

就把圖片改成雪花圖，完成一個雪花飄下的效果。

并且，其中有些內(nèi)容比較陳舊了，那么就學者改掉吧。

包括：

1.對left和top的操作僅支持IE瀏覽器，這咋行，必須得支持chrome。
2.控制圖片下落的過程還要去檢索element，不好吧，那就改成數(shù)組維持，直接操作數(shù)組中維持的對象，啟不更快。
3.向文檔中添加元素直接改成通過JS代碼創(chuàng)建元素對象的方式。

實現(xiàn)思路：

1.初始化生成10個div，全都采用絕對定位，每個div中放一個雪花圖片，設置好寬高，并保存在數(shù)組中，便于后面下雪的函數(shù)直接操作。
2.初始化每個div的橫坐標和縱坐標，總要給雪花一個下落的起始位置吧。
3.初始化為每個雪花都設一個縱向的下落步長，一個橫向的擺動步長，這樣每個雪花都會以不同的速度下落和擺動。
4.做一個下雪的函數(shù)，每10秒調(diào)一下該函數(shù)，每調(diào)一次該函數(shù)，就是控制每個雪花在縱向下落一個自身的步長，橫向的擺動通過正弦函數(shù)算出一個正弦值后乘以幅度，這樣雪花下落就是按照正弦波形的方式進行。

圖片可以網(wǎng)上隨便找。

以下代碼兼容IE8+，Chrome。

復制代碼代碼如下:

<BODY>

  <SCRIPT LANGUAGE="JavaScript">

    //圖片的過程中，橫坐標的軌跡是以一點為中心的正弦曲線

    //利用了setTimeout函數(shù)完成了動畫的功能

    //圖片

    var snowsrc="雪花.png"

    //雪花個數(shù)

    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中，并通過數(shù)組保存

      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變量加上一個步長

        //直接操作數(shù)組中對應的雪花div

        var snowFlakeDiv = snowFlakes[i];

        //更新圖片的縱坐標

        snowFlakeDiv.style.top = yp[i];

        //更新圖片的橫坐標

        snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);

      }

      //設定動畫刷新的時間周期

      setTimeout("snow()", 10);

    }

    //調(diào)用snowIE()函數(shù) 

    snow();

  </script>

</BODY>