<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪花飘落</title>
</head>
<style>
body{background: #000;height: 800px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div/>').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 雪花颜色 */
},
options = $.extend({}, defaults, options);
endPositionTop = documentHeight - documentHeight * 0.3;
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 10, /* 定义雪花最小尺寸 */
maxSize: 45,/* 定义雪花最大尺寸 */
newOn: 3000 /* 定义密集程度,数字越小越密集,cup使用率越高,建议最高设置成3000 */
});
});
</script>
<body>
</body>
</html>
jquery.snow.js
最新推荐文章于 2021-06-02 18:08:28 发布