sangge/hhl_project
1
0
Fork 0
Code Pull Requests Actions Activity

chore: move old project to demo

Browse Source
This commit is contained in:
sangge
2023-11-29 00:16:38 +08:00
parent c6cdda2c81
commit 855fd432e0
13 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo/README.md Normal file
View File

@@ -0,0 +1,5 @@
# hhl_project
hhl的项目
按一个按钮就打饭

BIN
demo/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

BIN
demo/braised_pork.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
demo/canteen_effect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
demo/chef.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
demo/chef_hand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
demo/desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

BIN
demo/dinner_plate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

27
demo/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饭堂界面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="canteen">
<img src="background.png" class="background" alt="Background">
<img src="rice_bucket.png" class="rice_bucket" alt="Rice bucket">
<img src="desktop.png" class="table" alt="Table">
<img src="dinner_plate.png" class="plate" alt="Plate">
<img src="chef.png" class="chef" alt="Chef">
<img src="chef_hand.png" class="chef-hand" alt="Chef's Hand">
<img src="rice.png" class="rice" alt="Rice">
<img src="braised_pork.png" class="meat" alt="Meat">
<img src="rice.png" class="rice-mirror" alt="Rice mirror">
<img src="braised_pork.png" class="meat-mirror" alt="Meat mirror">
</div>
<button onclick="serveFood()">Serve Food</button>
<script src="script.js"></script>
</body>
</html>

BIN
demo/rice.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
demo/rice_bucket.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

91
demo/script.js Normal file
View File

@@ -0,0 +1,91 @@
let step = 0;
/*
function serveFood() {
switch(step) {
case 0:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.rice').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 1:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.meat').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 2:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.rice-mirror').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 3:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.meat-mirror').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 4:
document.querySelector('.rice').style.opacity = '0';
document.querySelector('.meat').style.opacity = '0';
document.querySelector('.rice-mirror').style.opacity = '0';
document.querySelector('.meat-mirror').style.opacity = '0';
step = -1;
default:
step = -1;
break;
}
step++;
console.log(step);
}
*/
const OFFSET = 20; // 偏移量，每次堆叠时图片上移的像素值
function serveFood() {
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
switch(step % 4) {
case 0:
addFood('.rice', step);
break;
case 1:
addFood('.meat', step);
break;
case 2:
addFood('.rice-mirror', step);
break;
case 3:
addFood('.meat-mirror', step);
break;
}
document.querySelector('.chef-hand').style.opacity = '0';
step++;
console.log(step);
}, 500);
}
function addFood(selector, currentStep) {
const refElement = document.querySelector(selector);
const newElement = refElement.cloneNode(true);
newElement.style.opacity = '1';
newElement.style.position = 'absolute';
const translateYOffset = Math.floor(currentStep / 4) * OFFSET;
if (selector.includes('mirror')) {
newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px)) scaleX(-1)`;
} else {
newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px))`;
}
// Increase the z-index based on the current step
newElement.style.zIndex = 3 + currentStep; // This will make sure the new element is always on top
refElement.parentNode.insertBefore(newElement, refElement);
}

90
demo/styles.css Normal file
View File

@@ -0,0 +1,90 @@
.background {
position: relative;
width: 100%;
z-index: 0;
}
.canteen {
width: 40vw; /* 设置为视口宽度 */
height: 40vw; /* 保持宽高比 */
position: relative;
}
.canteen img {
position: absolute;
width: 100%;
height: 100%;
}
.table {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.plate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.chef-hand {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.5s;
z-index: 3;
}
.rice, .meat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
z-index: 3;
}
.rice-mirror, .meat-mirror {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(-1);
opacity: 0;
transition: opacity 0.5s;
z-index: 3;
}
.chef {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 18px;
position: relative;
z-index: 10;
}
.rice_bucket{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}