使用javascript實現雪花飄落的效果

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

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

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

包括：

1.對left和top的操作僅支持IE瀏覽器，這咋行，必須得支持chrome。

2.控制圖片下落的過程還要去檢索element，不好吧，那就改成數組維持，直接操作數組中維持的對象，啟不更快。

3.向文檔中添加元素直接改成通過JS代碼創建元素對象的方式。

實現思路：

1.初始化生成10個div，全都采用絕對定位，每個div中放一個雪花圖片，設置好寬高，并保存在數組中，便于后面下雪的函數直接操作。

2.初始化每個div的橫坐標和縱坐標，總要給雪花一個下落的起始位置吧。

3.初始化為每個雪花都設一個縱向的下落步長，一個橫向的擺動步長，這樣每個雪花都會以不同的速度下落和擺動。

4.做一個下雪的函數，每10秒調一下該函數，每調一次該函數，就是控制每個雪花在縱向下落一個自身的步長，橫向的擺動通過正弦函數算出一個正弦值后乘以幅度，這樣雪花下落就是按照正弦波形的方式進行。

圖片可以網上隨便找。

以下代碼兼容IE8+，Chrome。

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

//利用了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();

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

Android自定義ViewGroup的實現方法

怎么在Mac上看電視直播節目？Mac看電視直播方法圖文介紹

C#實現的鼠標鉤子

JS實現支持Ajax驗證的表單插件

C#實現圖片放大功能的按照像素放大圖像方法

JQuery中DOM加載與事件執行實例分析

獲取MSSQL 表結構中字段的備注、主鍵等信息的sql

即將發布的jQuery 3 有哪些新特性

js實現鼠標點擊左上角滑動菜單效果代碼

jQuery中:reset選擇器用法實例

centos安裝mysql數據庫的方法

javascript匿名函數實例分析

Linux系統的垃圾清理方法總結

php將access數據庫轉換到mysql數據庫的方法

總結

以上是生活随笔為你收集整理的php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。