js飘窗代码
"飘窗" 通常指的是一种在页面上浮动或滑动的窗口或元素。以下是一个简单的使用 JavaScript 和 CSS 实现的飘窗效果示例：
HTML:
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飘窗示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="floatingWindow" class="floating-window"> <p>这是一个飘窗！</p> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
css复制代码.floating-window { position: absolute; width: 200px; height: 100px; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; font-family: Arial, sans-serif; }
JavaScript (script.js):
javascript复制代码const floatingWindow = document.getElementById('floatingWindow'); let x = 0; let y = 0; const speed = 2; // 飘窗移动速度，可以根据需要调整 function moveFloatingWindow() { x += Math.random() * speed - speed / 2; // 随机左右移动 y += Math.random() * speed - speed / 2; // 随机上下移动 // 防止飘窗移出屏幕 if (x < 0) x = 0; if (y < 0) y = 0; if (x > window.innerWidth - floatingWindow.offsetWidth) x = window.innerWidth - floatingWindow.offsetWidth; if (y > window.innerHeight - floatingWindow.offsetHeight) y = window.innerHeight - floatingWindow.offsetHeight; floatingWindow.style.left = x + 'px'; floatingWindow.style.top = y + 'px'; requestAnimationFrame(moveFloatingWindow); // 使用 requestAnimationFrame 实现平滑动画效果 } // 当页面加载完成后开始移动飘窗 window.onload = moveFloatingWindow;
这个示例中，飘窗在页面加载完成后开始随机在屏幕上移动。你可以根据需要调整飘窗的大小、样式和移动速度。注意，这个示例使用了 requestAnimationFrame 来实现平滑的动画效果，这是现代网页开发中常用的方法。
如果你想要一个更复杂且带有动画效果的飘窗，你可以使用 CSS transitions 或 animations 来增强视觉效果。以下是一个使用 CSS 动画的飘窗示例：
HTML:
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飘窗示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="floatingWindow" class="floating-window"> <p>这是一个飘窗！</p> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
css复制代码body, html { height: 100%; margin: 0; overflow: hidden; /* 防止滚动条出现 */ } .floating-window { position: absolute; width: 200px; height: 100px; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; font-family: Arial, sans-serif; animation: float 5s ease-in-out infinite; /* 应用飘动动画 */ } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); /* 上浮 */ } 100% { transform: translateY(0); } }
JavaScript (script.js):
在这个示例中，我们不需要 JavaScript 来控制飘窗的移动，因为 CSS 动画已经实现了这个效果。但如果你想要控制飘窗的显示和隐藏，或者改变飘动的方向等，你可以添加一些 JavaScript 代码。
例如，以下代码将在页面加载后每隔一段时间显示和隐藏飘窗：
javascript复制代码const floatingWindow = document.getElementById('floatingWindow'); let isVisible = true; function toggleFloatingWindow() { if (isVisible) { floatingWindow.style.opacity = '0'; } else { floatingWindow.style.opacity = '1'; } isVisible = !isVisible; } // 每3秒切换飘窗的可见性 setInterval(toggleFloatingWindow, 3000);
在这个 JavaScript 代码中，我们使用了 setInterval 来定期切换飘窗的可见性。通过改变 opacity 属性，我们可以让飘窗淡入淡出。
这个示例中的飘窗动画是垂直方向的，它会上下浮动。如果你想要改变飘动的方向或路径，你需要调整 CSS 动画的 @keyframes 规则。
此外，为了增强用户体验，你可能还需要考虑飘窗的关闭按钮、飘窗内容的动态更新等功能，这些都可以通过 JavaScript 来实现。
