本来打算做一个模拟Windwos系统(就像网上流行的那个win12),结果呢发现有些难
写了如下代码,发现一些bug:
放大按钮问题
等
很多
先放上代码,看看有没有大佬帮我看看,也供大家学习(学习,但是别用到哪去):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写啥呢?不写了</title>
<style>
#desktop {
width: 100%;
/*height: calc(100vh - 10vh);*/
height: 95%;
background-color: #f1f1f1;
padding: 20px;
}
#dock {
width: 100%;
/*height: 10vh;*/
height: 5%;
background-color: #333;
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
z-index: 999;
}
#dock a {
color: #ffffff;
margin-right: 10px;
}
.window {
position: absolute;
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
.window .title-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
background-color: #f1f1f1;
padding: 5px;
}
.window .content {
padding: 10px;
resize: both;
}
.fullscreen {
width: 100%;
/*height: calc(100% - 1px);*/
height: 95%;
/*top: 0px;
left: 0px;
position: absolute;*/
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.resize-handle {
position: absolute;
width: 10px;
height: 10px;
background-color: #333;
bottom: 0;
right: 0;
cursor: se-resize;
}
</style>
</head>
<body>
<div id="desktop">
<a href="#" onclick="openWindow('window1')">应用窗口1</a>
<a href="#" onclick="openWindow('window2')">应用窗口2</a>
<a href="#" onclick="openWindow('window3')">应用窗口3</a>
</div>
<div id="dock">
<!-- 应用窗口超链接 -->
</div>
<script>
var windowMap = {};
function openWindow(windowId) {
var dock = document.getElementById('dock');
var link = document.createElement('a');
link.href = '#' + windowId;
link.textContent = '应用窗口';
dock.appendChild(link);
var windowDiv = document.createElement('div');
windowDiv.id = windowId;
windowDiv.className = 'window';
windowDiv.style.left = (Math.random() * 500) + 'px';
windowDiv.style.top = (Math.random() * 300) + 'px';
var titleBar = document.createElement('div');
titleBar.className = 'title-bar';
var fullscreenBtn = document.createElement('button');
fullscreenBtn.textContent = '「」';
fullscreenBtn.onclick = function () {
if (windowDiv.classList.contains('fullscreen')) {
windowDiv.classList.remove('fullscreen');
fullscreenBtn.textContent = '「」';
} else {
windowDiv.classList.add('fullscreen');
fullscreenBtn.textContent = '」「';
}
};
var hideBtn = document.createElement('button');
hideBtn.textContent = '-';
hideBtn.onclick = function () {
windowDiv.style.display = 'none';
};
var closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.onclick = function () {
dock.removeChild(link);
windowDiv.parentNode.removeChild(windowDiv);
};
titleBar.appendChild(fullscreenBtn);
titleBar.appendChild(hideBtn);
titleBar.appendChild(closeBtn);
var content = document.createElement('div');
content.className = 'content';
// 自定义每个窗口的内容
content.innerHTML = getCustomContent(windowId);
windowDiv.appendChild(titleBar);
windowDiv.appendChild(content);
document.body.appendChild(windowDiv);
// 初始化拖动窗口
dragElement(windowDiv);
// 存储窗口信息
windowMap[windowId] = {
link: link,
windowDiv: windowDiv
};
}
function getCustomContent(windowId) {
// 根据窗口ID返回自定义内容
switch (windowId) {
case 'window1':
return '<h3>窗口1的内容</h3>';
case 'window2':
return '<p>这是窗口2的内容</p>';
case 'window3':
return '<img src="image.jpg" alt="图像">';
default:
return '';
}
}
function dragElement(el) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
el.querySelector('.title-bar').onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
el.style.top = (el.offsetTop - pos2) + "px";
el.style.left = (el.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
window.onhashchange = function () {
var hash = window.location.hash;
var windowId = hash.replace('#', '');
var windowInfo = windowMap[windowId];
if (windowInfo) {
windowInfo.windowDiv.style.display = 'block';
}
};
</script>
</body>
</html>