JQuery實現屏幕飄落雪花效果

ID:83710 · 發表于 2015-6-25 16:40

這個東東的源碼是【軟謀教育】徐老師提供的，感謝老師的講解（PS：雖然當天我沒有上課、但是課后我有復習的！）

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

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

JQuery代碼：

// 需要引入JQuery文件

$(document).ready(function () {

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

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

var showRate = 20 // 飄落物出現的時間頻率

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; // 飄落物下落時隨機位置

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

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

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; // 獲取飄落物下落的隨機速度

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

left: startPositionLeft,

opacity: startOpacity,

'font-size': sizeFlake,

color: snowColor

}).animate({

top: endPositionTop,

left: endPositionLeft,