正文

如何轻松制作网页飘窗，JS技巧让你飘窗自由飘动

/0 浏览量
0405

网页飘窗是一种常见的网页元素，它可以在页面上自由飘动，吸引访客的注意力，增加页面的互动性和趣味性。通过JavaScript，我们可以轻松实现这样一个飘窗效果。下面，我将一步步带你了解如何制作一个自由飘动的飘窗。

准备工作

在开始之前，我们需要准备以下几样东西：

  1. HTML结构：定义飘窗的基本结构和样式。
  2. CSS样式：设置飘窗的初始样式，包括大小、位置、背景等。
  3. JavaScript脚本：编写JavaScript代码，使飘窗能够自由飘动。

HTML结构

首先，我们需要一个简单的HTML结构来表示飘窗：

<div id="floatingWindow" class="floating-window">
    <p>这是一个飘窗！</p>
</div>

CSS样式

接下来，为飘窗添加一些基本样式：

.floating-window {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    position: fixed;
    top: 50px;
    left: 50px;
    display: none; /* 默认不显示，将在JavaScript中控制显示 */
    text-align: center;
    line-height: 100px;
    font-size: 16px;
    color: #333;
}

JavaScript脚本

最后，我们需要编写JavaScript代码来让飘窗飘动。以下是一个简单的例子：

document.addEventListener('DOMContentLoaded', function() {
    var floatingWindow = document.getElementById('floatingWindow');

    // 飘窗的初始位置
    var startX = 50;
    var startY = 50;

    // 随机改变飘窗的飘动方向和速度
    function getRandomDirection() {
        var directions = ['right', 'left', 'up', 'down'];
        return directions[Math.floor(Math.random() * directions.length)];
    }

    function getRandomSpeed() {
        return Math.random() * 5 + 1; // 速度范围从1到6
    }

    // 移动飘窗
    function moveWindow() {
        var direction = getRandomDirection();
        var speed = getRandomSpeed();

        if (direction === 'right') {
            startX += speed;
        } else if (direction === 'left') {
            startX -= speed;
        } else if (direction === 'up') {
            startY -= speed;
        } else if (direction === 'down') {
            startY += speed;
        }

        // 限制飘窗在屏幕范围内
        startX = Math.max(0, Math.min(startX, window.innerWidth - floatingWindow.offsetWidth));
        startY = Math.max(0, Math.min(startY, window.innerHeight - floatingWindow.offsetHeight));

        // 更新飘窗位置
        floatingWindow.style.left = startX + 'px';
        floatingWindow.style.top = startY + 'px';
    }

    // 每隔一段时间移动飘窗
    setInterval(moveWindow, 1000);

    // 鼠标悬停时显示飘窗
    floatingWindow.addEventListener('mouseover', function() {
        floatingWindow.style.display = 'block';
    });

    // 鼠标移出时隐藏飘窗
    floatingWindow.addEventListener('mouseout', function() {
        floatingWindow.style.display = 'none';
    });
});

这段代码实现了以下功能：

  • 当页面加载完成后，初始化飘窗的位置和事件监听器。
  • 每隔一秒钟，通过setInterval函数调用moveWindow函数来移动飘窗。
  • moveWindow函数会随机选择一个方向和速度来移动飘窗，并确保飘窗不会移出屏幕范围。
  • 当鼠标悬停在飘窗上时，它会显示飘窗；当鼠标移出时，它会隐藏飘窗。

通过以上步骤，你就可以制作出一个简单而有趣的网页飘窗了。你可以根据自己的需求调整飘窗的样式、移动速度和方向，让飘窗更加生动有趣。

-- 展开阅读全文 --