当前位置：首页 > React

react实现飘窗

2026-01-26 19:38:50React

实现飘窗的基本思路

使用React实现飘窗效果，通常需要结合CSS动画或定位属性来控制飘窗的浮动效果。飘窗可以是通知、广告或提示信息，悬浮在页面某个位置并随时间移动。

创建飘窗组件

创建一个基础的React组件，使用useState和useEffect管理飘窗的位置和动画状态。

import React, { useState, useEffect } from 'react';
import './FloatingWindow.css';

const FloatingWindow = ({ children }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [direction, setDirection] = useState({ x: 1, y: 1 });

  useEffect(() => {
    const moveInterval = setInterval(() => {
      setPosition(prev => {
        const newX = prev.x + direction.x;
        const newY = prev.y + direction.y;

        // 边界检测，反向移动
        if (newX <= 0 || newX >= window.innerWidth - 200) {
          setDirection(prev => ({ ...prev, x: -prev.x }));
        }
        if (newY <= 0 || newY >= window.innerHeight - 100) {
          setDirection(prev => ({ ...prev, y: -prev.y }));
        }

        return { x: newX, y: newY };
      });
    }, 30);

    return () => clearInterval(moveInterval);
  }, [direction]);

  return (
    <div 
      className="floating-window"
      style={{
        left: `${position.x}px`,
        top: `${position.y}px`
      }}
    >
      {children}
    </div>
  );
};

export default FloatingWindow;

添加CSS样式

创建FloatingWindow.css文件，定义飘窗的样式和动画效果。

.floating-window {
  position: fixed;
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
  z-index: 1000;
  transition: transform 0.1s ease;
}

使用飘窗组件

在父组件中引入并使用FloatingWindow，传递需要显示的内容。

import React from 'react';
import FloatingWindow from './FloatingWindow';

const App = () => {
  return (
    <div>
      <h1>飘窗示例</h1>
      <FloatingWindow>
        <p>这是一个飘窗内容，会随机移动。</p>
      </FloatingWindow>
    </div>
  );
};

export default App;

优化飘窗行为

可以通过调整useEffect中的时间间隔或移动步长来控制飘窗的速度。添加关闭按钮或点击事件增强交互性。

const FloatingWindow = ({ children, onClose }) => {
  // ...之前的代码...

  return (
    <div 
      className="floating-window"
      style={{
        left: `${position.x}px`,
        top: `${position.y}px`
      }}
    >
      <button 
        onClick={onClose}
        style={{ position: 'absolute', right: '5px', top: '5px' }}
      >
        ×
      </button>
      {children}
    </div>
  );
};

响应式边界检测

确保飘窗在窗口大小变化时仍能正确反弹。添加resize事件监听器更新边界条件。

useEffect(() => {
  const handleResize = () => {
    setPosition(prev => {
      const maxX = window.innerWidth - 200;
      const maxY = window.innerHeight - 100;
      return {
        x: Math.min(prev.x, maxX),
        y: Math.min(prev.y, maxY)
      };
    });
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

通过以上步骤，可以实现一个基础的React飘窗效果，可根据需求进一步扩展功能或样式。

react实现飘窗