jquery 气球飘动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。气球飘动效果通常是指在网页上模拟气球随风飘动的动画效果。

类型

气球飘动效果可以通过 CSS 动画和 JavaScript 实现。使用 jQuery 可以更方便地结合这两种方式。

应用场景

气球飘动效果常用于网站的开场动画、节日活动页面、广告弹窗等场景，增加页面的趣味性和互动性。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现气球飘动效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气球飘动效果</title>
    <style>
        .balloon {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="balloon" id="balloon"></div>

    <script>
        $(document).ready(function() {
            var balloon = $('#balloon');
            var dirX = Math.random() * 2 - 1; // 随机方向
            var dirY = Math.random() * 2 - 1; // 随机方向
            var speed = 2; // 飘动速度

            function moveBalloon() {
                var x = balloon.offset().left + dirX * speed;
                var y = balloon.offset().top + dirY * speed;

                // 边界检测
                if (x < 0 || x > $(window).width() - balloon.width()) {
                    dirX = -dirX;
                }
                if (y < 0 || y > $(window).height() - balloon.height()) {
                    dirY = -dirY;
                }

                balloon.css({
                    left: x,
                    top: y
                });

                requestAnimationFrame(moveBalloon);
            }

            moveBalloon();
        });
    </script>
</body>
</html>