JQuery实现屏幕飘落雪花效果 -

标题: JQuery实现屏幕飘落雪花效果 [打印本页]

作者: hongniu 时间: 2015-6-25 16:40
标题: JQuery实现屏幕飘落雪花效果
这个东东的源码是【软谋教育】徐老师提供的，感谢老师的讲解（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,

opacity: 0.5

}, durationFall, function () {

$(this).remove();

});

}, showRate);

});

欢迎光临 (http://www.51hei.com/bbs/)