雪花飞舞动画

最新推荐文章于 2021-05-25 23:34:39 发布

晚风来急

最新推荐文章于 2021-05-25 23:34:39 发布

阅读量311

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/luoyeguigen000/article/details/80207102

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

雪花飞舞动画JQuery版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪花飞舞动画</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
(function($) {
$.fn.snow = function(options) {
var $flake = $('<div id="flake" />').css({
'position': 'absolute',
'top': '-50px'
}).html('❆'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 10,
maxSize: 20,
newOn: 2000,
flakeColor: "red"
},
options = $.extend({},
defaults, options);
var interval = setInterval(function() {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
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);
$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 2000,
flakeColor: 'red'
});
</script>
</body>
</html>

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>雪花飞舞动画</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
(function($) {
    $.fn.snow = function(options) {
        var $flake = $('<div id="flake" />').css({
            'position': 'absolute',
            'top': '-50px'
        }).html('❆'),
        documentHeight = $(document).height(),
        documentWidth = $(document).width(),
        defaults = {
            minSize: 10,
            maxSize: 20,
            newOn: 2000,
            flakeColor: "red"
        },
        options = $.extend({},
        defaults, options);
        var interval = setInterval(function() {
            var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 40,
            endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
            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);
$.fn.snow({
    minSize: 5,
    maxSize: 50,
    newOn: 2000,
    flakeColor: 'red'
});
</script>
</body>
</html>