標題: JQuery實現(xiàn)屏幕飄落雪花效果 [打印本頁]
作者: hongniu 時間: 2015-6-25 16:40
標題: JQuery實現(xiàn)屏幕飄落雪花效果
這個東東的源碼是【軟謀教育】徐老師提供的，感謝老師的講解（PS：雖然當天我沒有上課、但是課后我有復(fù)習的�。�
首先使用的時候需要引入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; // 飄落物下落時隨機位置
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,
opacity: 0.5
}, durationFall, function () {
$(this).remove();
});
}, showRate);