使用html+jq写出下雪特效

最新推荐文章于 2024-07-12 16:27:40 发布

wwwoow_

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量93

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wwwoow_/article/details/134536647

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下雪特效</title>
    <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <style>
        .body {
            width: 100%;
            height: 100vh;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="body">
        <div id="page_end_html">
            <script type="text/javascript">
                (function ($) {
                    $.fn.snow = function (options) {
                        var $flake = $('<div id="snowbox" />').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('易烊千玺'),  //html里写啥都行
                            documentHeight = $(document).height(),
                            documentWidth = $(document).width(),
                            defaults = {
                                minSize: 10,
                                maxSize: 20,
                                newOn: 1000,
                                flakeColor: "#ED0000" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                            },
                            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 - 200,
                                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: 5, /* 定义雪花最小尺寸 */
                        maxSize: 50,/* 定义雪花最大尺寸 */
                        newOn: 300  /* 定义密集程度，数字越小越密集 */
                    });
                });
            </script>

        </div>
    </div>
</body>

</html>