三个按钮在底部,高度为40,且始终在画布的上层,创建一个小圆形按钮来隐藏和显示三个按钮,小圆按钮可以按照拖动,小圆按钮在最顶层
时间: 2024-04-18 20:29:15 浏览: 21
要实现这个效果,我们可以对原有的代码进行一些修改和添加。首先,我们需要创建一个小圆形按钮,并设置它的样式和位置。然后,我们将添加一些JavaScript代码,使得小圆按钮可以拖动,并且始终显示在最顶层。
以下是修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
/* 设置画布容器的样式 */
.canvas {
position: relative;
width: 100%;
height: 100vh;
}
/* 设置内嵌框的样式 */
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none; /* 默认隐藏 */
}
/* 设置按钮容器的样式 */
.btn-container {
position: fixed;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
z-index: 1;
}
/* 设置按钮的样式 */
.btn {
margin: 0 10px;
}
/* 设置小圆按钮的样式 */
.circle-btn {
position: fixed;
bottom: 60px;
right: 20px;
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
z-index: 2;
}
</style>
</head>
<body>
<!-- 画布容器 -->
<div class="canvas">
<!-- 内嵌框1 -->
<iframe class="frame" src="pptist.html"></iframe>
<!-- 内嵌框2 -->
<iframe class="frame" src="E:\Demo\Omath.html"></iframe>
<!-- 内嵌框3 -->
<iframe class="frame" src="E:\Demo\Board.html"></iframe>
</div>
<!-- 控制按钮容器 -->
<div class="btn-container">
<!-- 控制按钮 -->
<button class="btn btn-primary" onclick="showFrame(1)">演示</button>
<button class="btn btn-secondary" onclick="showFrame(2)">画布</button>
<button class="btn btn-success" onclick="showFrame(3)">白板</button>
</div>
<!-- 小圆按钮 -->
<div class="circle-btn" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
<script>
function showFrame(index) {
var frames = document.getElementsByClassName('frame');
// 隐藏所有内嵌框
for (var i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
// 显示指定的内嵌框
frames[index - 1].style.display = 'block';
}
var isDragging = false;
var circleBtn = document.querySelector('.circle-btn');
var canvas = document.querySelector('.canvas');
circleBtn.addEventListener('mousedown', function(e) {
isDragging = true;
circleBtn.style.cursor = 'grabbing';
});
canvas.addEventListener('mousemove', function(e) {
if (isDragging) {
var x = e.clientX;
var y = e.clientY;
circleBtn.style.right = `${window.innerWidth - x}px`;
circleBtn.style.bottom = `${window.innerHeight - y}px`;
}
});
canvas.addEventListener('mouseup', function(e) {
isDragging = false;
circleBtn.style.cursor = 'grab';
});
function dragStart(e) {
e.dataTransfer.setData('text/plain', null);
circleBtn.style.cursor = 'grabbing';
}
function dragEnd(e) {
circleBtn.style.cursor = 'grab';
}
</script>
</body>
</html>
```
这段代码中,我们添加了一个名为 `circle-btn` 的 `div` 元素,它表示小圆形按钮。我们给它设置了合适的样式,并将其位置固定在页面的右下角。
然后,我们使用JavaScript代码实现了拖动功能。当鼠标按下小圆按钮时,我们将 `isDragging` 变量设置为 `true`,表示正在拖动。当鼠标在画布上移动时,如果 `isDragging` 为 `true`,则更新小圆按钮的位置。最后,当鼠标释放时,我们将 `isDragging` 设置为 `false`。
同时,我们还添加了 `dragStart` 和 `dragEnd` 函数,用于设置拖动开始和结束时的样式。
现在,你可以尝试在浏览器中运行修改后的代码,并通过拖动小圆按钮来隐藏和显示三个按钮。请注意,由于在代码中使用了 `E:\Demo\Omath.html` 和 `E:\Demo\Board.html` 这两个本地文件的路径,你可能需要将这些路径修改为正确的文件路径才能正常显示相应的内容。