云主机测评网浮动窗口（Floating Window）是一种在网页上显示的可拖动、可调整大小的窗口，通常用于提供额外的信息或功能，使用JavaScript和CSS可以很容易地实现一个浮动窗口。
1. 创建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="floating-window">
<div class="header">
<span class="title">浮动窗口</span>
<button class="close-btn">X</button>
</div>
<div class="content">
<h3>内容标题</h3>
<p>这里是浮动窗口的内容，你可以在这里放置任何你想要展示的信息。</p>
<table>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<!-更多行 -->
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html> 2. 添加CSS样式
我们为浮动窗口添加一些基本的CSS样式，使其看起来更美观。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#floating-window {
position: fixed;
top: 50px;
left: 50px;
width: 300px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.header {
background-color: #f4f4f4;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
}
.title {
margin: 0;
font-size: 16px;
}
.close-btn {
background: none;
border: none;
font-size: 16px;
cursor: pointer;
}
.content {
padding: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
} 3. 添加JavaScript功能
我们使用JavaScript来实现浮动窗口的拖动和关闭功能。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const floatingWindow = document.getElementById('floating-window');
const header = floatingWindow.querySelector('.header');
const closeBtn = floatingWindow.querySelector('.close-btn');
let isDragging = false;
let offsetX, offsetY;
header.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX floatingWindow.getBoundingClientRect().left;
offsetY = e.clientY floatingWindow.getBoundingClientRect().top;
floatingWindow.style.transition = 'none'; // 禁用过渡效果
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
floatingWindow.style.left =${e.clientX offsetX}px;
floatingWindow.style.top =${e.clientY offsetY}px;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
floatingWindow.style.transition = ''; // 恢复过渡效果
});
closeBtn.addEventListener('click', () => {
floatingWindow.style.display = 'none';
});
}); 通过以上步骤，我们实现了一个简单的浮动窗口，它可以在网页上自由拖动，并且可以通过点击关闭按钮来隐藏，这个浮动窗口可以包含各种内容，如文本、表格等，非常适合用来展示临时信息或工具。
小伙伴们，上文介绍了“浮动窗口js”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错，值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布！
我在用这类站群服务器、还可以. 用很多年了。