DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用javascript實現雪花飄落的效果
使用javascript實現雪花飄落的效果
編輯:關於JavaScript     

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

以上就是全部代碼了,效果還是挺棒的,具體的解釋請看注釋,這裡就不多廢話了,希望對大家能有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved