快捷導(dǎo)航

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

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

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

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

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

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

包括：

1.對(duì)left和top的操作僅支持IE瀏覽器，這咋行，必須得支持chrome。
2.控制圖片下落的過程還要去檢索element，不好吧，那就改成數(shù)組維持，直接操作數(shù)組中維持的對(duì)象，啟不更快。
3.向文檔中添加元素直接改成通過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)通過正弦函數(shù)算出一個(gè)正弦值后乘以幅度，這樣雪花下落就是按照正弦波形的方式進(jìn)行。

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

以下代碼兼容IE8+，Chrome。

復(fù)制代碼代碼如下:

<BODY>

  <SCRIPT LANGUAGE="JavaScript">

    //圖片的過程中，橫坐標(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中，并通過數(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)超過了屏幕下沿，重置該圖片的信息，包括橫坐標(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>