jquery随机生成div移动并消失

原创

mob64ca12f463e6 2024-11-01 08:52:05 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f463e6的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 随机生成、移动并消失的 DIV 体验

在现代网页开发中，jQuery 是一个非常强大且流行的 JavaScript 库，它极大地简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互。本文将通过一个有趣的示例，通过 jQuery 随机生成 DIV，让它们在页面上移动，并在一段时间后消失。这个示例不仅可以帮助你理解 jQuery 的基本用法，还能帮助你了解如何通过简单的动画处理来提升用户体验。

基本概念

在我们的示例中，将使用 jQuery 来完成以下步骤：

生成 DIV 元素：随机生成一个 DIV 元素。
随机位置移动：将 DIV 元素放置在随机的位置，并实现移动动画。
定时消失：在动画完成后，DIV 元素会在一段时间后消失。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机生成 DIV 移动并消失</title>
    <script src="
    <style>
        body {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        .random-div {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            position: absolute;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<script>
    function generateRandomDiv() {
        // 创建新DIV元素
        const randomDiv = $('<div class="random-div"></div>');

        // 生成随机的位置
        const x = Math.floor(Math.random() * ($(window).width() - 50)); // 50是DIV的宽度
        const y = Math.floor(Math.random() * ($(window).height() - 50)); // 50是DIV的高度
        randomDiv.css({ left: x, top: y });

        // 将新DIV添加到body中
        $('body').append(randomDiv);

        // 动画移动并消失
        randomDiv.animate({
            left: Math.floor(Math.random() * ($(window).width() - 50)),
            top: Math.floor(Math.random() * ($(window).height() - 50))
        }, 2000, function() {
            // 动画完成后消失
            $(this).fadeOut(1000, function() {
                $(this).remove(); // 从DOM中移除
            });
        });
    }

    // 每隔一秒生成一个新的DIV
    setInterval(generateRandomDiv, 1000);
</script>

</body>
</html>

在这个示例中，generateRandomDiv 函数每秒钟生成一个新的 DIV 元素，随机地设置它在页面上的位置，然后在移动时再次随机设置新位置。移动动画使用 jQuery 的 animate 方法，消失则用 fadeOut 方法实现。

动画过程

在代码中，我们可以看到，randomDiv.animate() 的传入参数是一个对象，表示移动后的最终位置。同时，传入的第二个参数是动画持续的时间（以毫秒为单位）。在动画完成后，通过 fadeOut 方法，使得 DIV 在一段时间后消失。

下面是一个使用 Mermaid.js 描述的序列图，展示了整个过程的步骤：

sequenceDiagram
    participant User
    participant Browser
    Note over User: 用户访问页面
    User->>Browser: 浏览器加载页面
    Browser->>Browser: 生成随机 DIV 1
    Browser-->>User: 随机出现的 DIV
    Note over Browser: 经过 1 秒
    Browser->>Browser: 生成随机 DIV 2
    Browser-->>User: 随机出现的 DIV
    Browser->>Browser: DIV 1 移动
    Note over Browser: 移动并消失
    Browser-->>User: DIV 1 消失
    Browser->>Browser: DIV 2 移动并消失
    Browser-->>User: DIV 2 消失

通过这个序列图，我们可以清晰地看出用户的操作过程和浏览器的响应过程，从生成 DIV 到消失的整个动画流。