浮动窗口（Floating Window）是一种在网页上显示的可拖动、可调整大小的弹出窗口，它通常用于提供额外的信息或功能，而不会干扰用户对主页面内容的查看。
以下是一个简单的JavaScript代码示例，用于创建一个基本的浮动窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动窗口示例</title>
<style>
#floatingWindow {
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
}
#floatingWindowHeader {
padding: 10px;
background-color: #f1f1f1;
cursor: move;
}
#floatingWindowContent {
padding: 10px;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
</style>
</head>
<body>
<button onclick="showFloatingWindow()">打开浮动窗口</button>
<div id="overlay"></div>
<div id="floatingWindow">
<div id="floatingWindowHeader">浮动窗口</div>
<div id="floatingWindowContent">
<p>这是一个浮动窗口的内容。</p>
<button onclick="hideFloatingWindow()">关闭</button>
</div>
</div>
<script>
function showFloatingWindow() {
document.getElementById('overlay').style.display = 'block';
document.getElementById('floatingWindow').style.display = 'block';
}
function hideFloatingWindow() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('floatingWindow').style.display = 'none';
}
// 使浮动窗口可拖动
let floatingWindow = document.getElementById('floatingWindow');
let header = document.getElementById('floatingWindowHeader');
let offsetX, offsetY;
header.onmousedown = function(event) {
offsetX = event.clientX floatingWindow.getBoundingClientRect().left;
offsetY = event.clientY floatingWindow.getBoundingClientRect().top;
document.onmousemove = function(event) {
floatingWindow.style.left = (event.clientX offsetX) + 'px';
floatingWindow.style.top = (event.clientY offsetY) + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</body>
</html> 代码解释
1、HTML结构：
button元素用于触发显示浮动窗口。
div#overlay是一个半透明的背景层，用于覆盖整个屏幕，增加浮动窗口的突出效果。
div#floatingWindow是浮动窗口本身，包含一个标题栏和一个内容区域。
div#floatingWindowHeader是浮动窗口的标题栏，用户可以点击并拖动它来移动窗口。
div#floatingWindowContent是浮动窗口的内容区域，可以放置任何需要显示的信息或控件。
2、CSS样式：
#floatingWindow定义了浮动窗口的基本样式，包括大小、位置和外观。
#floatingWindowHeader栏的样式，使其看起来像一个可拖动的区域。
#overlay定义了背景层的样式，使其覆盖整个屏幕并具有半透明效果。
#floatingWindow和#overlay默认情况下是隐藏的（display: none）。
3、JavaScript功能：
showFloatingWindow函数用于显示浮动窗口和背景层。
hideFloatingWindow函数用于隐藏浮动窗口和背景层。
通过监听header元素的mousedown事件，实现浮动窗口的拖动功能，当用户按下鼠标按钮时，记录鼠标的位置偏移量，并在mousemove事件中更新浮动窗口的位置，当用户释放鼠标按钮时，停止拖动。
这个示例展示了如何创建一个简单的浮动窗口，并使其具有基本的拖动功能，你可以根据需要进一步扩展和美化这个浮动窗口，例如添加更多的内容、样式或功能。
以上内容就是解答有关“浮动窗口代码js”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1355674.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复