上一篇
如何实现浮动窗口效果的JavaScript代码是什么？
浮动窗口（Floating Window）是一种在网页上显示的可拖动、可调整大小的弹出窗口，它通常用于提供额外的信息或功能，而不会干扰用户对主页面内容的查看。
以下是一个简单的JavaScript代码示例，用于创建一个基本的浮动窗口，这个示例包括HTML、CSS和JavaScript部分。
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>
<button id="openBtn">打开浮动窗口</button>
<div id="floatingWindow" >
<div >
<span id="title">浮动窗口</span>
<button id="closeBtn">X</button>
</div>
<div >
<p>这是一个浮动窗口的内容，你可以在这里添加任何你想要展示的信息。</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分
我们编写一些CSS样式来美化我们的浮动窗口。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#openBtn {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
#floatingWindow {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
#floatingWindow.hidden {
display: none;
}
.header {
background-color: #007bff;
color: white;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background: none;
border: none;
color: white;
cursor: pointer;
}
.content {
padding: 20px;
}JavaScript部分
我们编写JavaScript代码来实现浮动窗口的打开、关闭和拖动功能。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const openBtn = document.getElementById('openBtn');
const floatingWindow = document.getElementById('floatingWindow');
const closeBtn = document.getElementById('closeBtn');
let isDragging = false;
let offsetX, offsetY;
openBtn.addEventListener('click', () => {
floatingWindow.classList.remove('hidden');
});
closeBtn.addEventListener('click', () => {
floatingWindow.classList.add('hidden');
});
floatingWindow.addEventListener('mousedown', (e) => {
if (e.target === floatingWindow || e.target === document.querySelector('.header')) {
isDragging = true;
offsetX = e.clientX floatingWindow.getBoundingClientRect().left;
offsetY = e.clientY floatingWindow.getBoundingClientRect().top;
floatingWindow.style.opacity = '0.7';
}
});
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.opacity = '1';
});
});详细解释
HTML部分
我们创建了一个按钮，当点击该按钮时，会显示浮动窗口。
浮动窗口包含一个标题栏和一个内容区域，标题栏有一个关闭按钮，用于隐藏浮动窗口。
CSS部分
使用CSS来设置浮动窗口的样式，使其居中显示，并具有阴影效果和圆角边框。
通过hidden类来控制浮动窗口的显示和隐藏。
JavaScript部分
监听按钮的点击事件，以显示浮动窗口。
监听关闭按钮的点击事件，以隐藏浮动窗口。
实现拖动功能：当鼠标按下时，记录鼠标位置和浮动窗口的位置偏移量；当鼠标移动时，更新浮动窗口的位置；当鼠标松开时，停止拖动。
为了增加内容的丰富性，我们可以在浮动窗口中添加更多的HTML元素，如表格、图片等，以下是一个扩展示例，其中包含了一个表格。
扩展后的HTML部分
<div >
<h3>表格示例</h3>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</table>
</div>扩展后的CSS部分（可选）
如果需要为表格添加更多样式，可以进一步修改CSS。
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}通过这些步骤，你可以创建一个功能齐全且美观的浮动窗口，并在其中添加各种内容以满足不同的需求。
到此，以上就是小编对于“浮动窗口js代码”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/21824.html
