JQuery實現(xiàn)屏幕飄落雪花效果

ID:83710 · 發(fā)表于 2015-6-25 16:40

這個東東的源碼是【軟謀教育】徐老師提供的，感謝老師的講解（PS：雖然當(dāng)天我沒有上課、但是課后我有復(fù)習(xí)的�。�

首先使用的時候需要引入JQuery.JS文件，然后引入snowFalling.js文件就可以實現(xiàn)了。先看一下效果

這漫天的大雪不禁讓我想起08、09、10、11年，那時候我們還是高中生，在漫天飄雪的【牙克石】一起奔赴網(wǎng)吧的道路、時間飛逝啊。。。

JQuery代碼：

// 需要引入JQuery文件

$(document).ready(function () {

var minSize = 3; // 飄落物最小尺寸

var maxSize = 30; // 飄落物最大尺寸

var showRate = 20 // 飄落物出現(xiàn)的時間頻率

var snowColor = "#FFFFFF" // 飄落物顏色

var snowLayer = $('<div></div>').css({ 'position': 'absolute', 'top': '-50px' }).html('❄'); // 飄落物顯示的層

var winHeight = $(document).height(); // 獲取頁面高度

var winWidth = $(document).width(); // 獲取頁面的寬度

setInterval(function () {

var a = Math.random();

var startPositionLeft = Math.random() * winWidth - 100; // 飄落物下落時隨機(jī)位置

var startOpacity = 0.7 + Math.random(); // 獲取隨機(jī)的透明度

var sizeFlake = minSize + Math.random() * maxSize; // 獲取飄落物隨機(jī)大小

var endPositionTop = winHeight - 80; // 飄落物距離窗體上端距離

var endPositionLeft = (startPositionLeft + Math.random() * 500) >= winWidth ? winWidth - 50 : (startPositionLeft + Math.random() * 500); // 飄落物距離窗體左端距離

if (endPositionLeft > winWidth) {

endPositionLeft = winWidth - 100;

}

var durationFall = winHeight * 10 + Math.random() * 3000; // 獲取飄落物下落的隨機(jī)速度

snowLayer.clone().appendTo('body').css({

left: startPositionLeft,

opacity: startOpacity,

'font-size': sizeFlake,

color: snowColor

}).animate({

top: endPositionTop,

left: endPositionLeft,