DreamLife/DreamLife_Haihai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现移动端触屏设备可以通过虚拟鼠标实现效果、操控方式类似触控板

Browse Source
This commit is contained in:
张梦南 2025-05-05 20:07:28 +08:00
parent 04e4d1346c
commit 8a655d7097
4 changed files with 186 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
icon/move.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6L43 25L24 27L13.9948 44L8 6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

9
index.html
View File

@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>脆皮大学生向你发出请假条条</title> <title>Haihai</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="fake-cursor"></div>
<!-- 初始界面 --> <!-- 初始界面 -->
<section class="confirm"> <section class="confirm">
<div class="confirm-body"> <div class="confirm-body">
@ -28,7 +29,7 @@
<section class="accepted hidden"> <section class="accepted hidden">
<div class="accepted-body"> <div class="accepted-body">
<h2 class="accepted-body-title">感谢导员批假！</h2> <h2 class="accepted-body-title">感谢导员批假！</h2>
<h3 class="accepted-body-subtitle">小树非常开心，导员开心快乐！</h3> <h3 class="accepted-body-subtitle">孩子非常开心，导员开心快乐！</h3>
<figure class="boi" style="--happiness:1; --derp:0; --px:0.5; --py:0.5;"> <figure class="boi" style="--happiness:1; --derp:0; --px:0.5; --py:0.5;">
<div class="boi-blush boi-blush-left"></div> <div class="boi-blush boi-blush-left"></div>
<div class="boi-blush boi-blush-right"></div> <div class="boi-blush boi-blush-right"></div>
@ -43,8 +44,8 @@
<!-- 拒绝后的新界面 --> <!-- 拒绝后的新界面 -->
<section class="rejected hidden"> <section class="rejected hidden">
<div class="rejected-body"> <div class="rejected-body">
<h2 class="rejected-body-title">小树有点难过...</h2> <h2 class="rejected-body-title">孩子有点难过...</h2>
<h3 class="rejected-body-subtitle">但小树尊重你的决定，祝你一切顺利！</h3> <h3 class="rejected-body-subtitle">但俺尊重你的决定，祝你一切顺利！</h3>
<figure class="boi" style="--happiness:0.2; --derp:0; --px:0.5; --py:0.5;"> <figure class="boi" style="--happiness:0.2; --derp:0; --px:0.5; --py:0.5;">
<div class="boi-blush boi-blush-left"></div> <div class="boi-blush boi-blush-left"></div>
<div class="boi-blush boi-blush-right"></div> <div class="boi-blush boi-blush-right"></div>

146
script.js
View File

@ -1,82 +1,142 @@
const confirmSection = document.querySelector('.confirm'); const confirmSection = document.querySelector('.confirm');
const acceptedSection = document.querySelector('.accepted'); const acceptedSection = document.querySelector('.accepted');
const rejectedSection = document.querySelector('.rejected'); const rejectedSection = document.querySelector('.rejected');
const boi = document.querySelector('.boi'); const boi = document.querySelector('.boi');
const btnDelete = document.querySelector('.confirm-body-button-delete'); const btnDelete = document.querySelector('.confirm-body-button-delete');
const btnCancel = document.querySelector('.confirm-body-button-cancel'); const btnCancel = document.querySelector('.confirm-body-button-cancel');
const current = { const current = {
happiness: 0.9, happiness: 0.9,
derp: 1, derp: 1,
px: 0.5, px: 0.5,
py: 0.5 py: 0.5
}; };
const target = { ...current }; const target = { ...current };
let rejectCount = 0; const fakeCursor = document.querySelector('.fake-cursor');
// 事件监听 // 页面加载时，将其放在屏幕中心
confirmSection.addEventListener('mousemove', onMouseMove); window.addEventListener('load', () => {
confirmSection.addEventListener('mouseleave', onMouseLeave); // 设置初始位置为屏幕中心（或者你想要的初始位置）
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 1.4;
fakeCursor.style.transition = 'none'; // 先禁用动画
fakeCursor.style.transform = `translate(${centerX}px, ${centerY}px)`;
});
btnCancel.addEventListener('click', () => { document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
if (touch) {
const { clientX, clientY } = touch;
fakeCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;
}
}, { passive: false });
document.addEventListener('touchend', (e) => {
const touch = e.changedTouches[0];
if (touch) {
const { clientX, clientY } = touch;
// 模拟点击事件
const target = document.elementFromPoint(clientX, clientY);
if (target) {
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
clientX,
clientY,
});
target.dispatchEvent(clickEvent);
}
}
// 隐藏箭头
fakeCursor.style.transform = 'translate(-1000px, -1000px)';
});
let rejectCount = 0;
// 鼠标事件
confirmSection.addEventListener('mousemove', onMouseMove);
confirmSection.addEventListener('mouseleave', onMouseLeave);
// —— 触屏事件 ——
// 滑动模拟鼠标移动
confirmSection.addEventListener('touchstart', onTouchMove, { passive: false });
confirmSection.addEventListener('touchmove', onTouchMove, { passive: false });
// 手指离开模拟鼠标离开
confirmSection.addEventListener('touchend', onMouseLeave);
btnCancel.addEventListener('click', () => {
confirmSection.classList.add('hidden'); confirmSection.classList.add('hidden');
acceptedSection.classList.remove('hidden'); acceptedSection.classList.remove('hidden');
target.happiness = 1; // 开心到起飞 target.happiness = 1; // 开心到起飞
updateBoi(); updateBoi();
}); });
btnDelete.addEventListener('click', () => { btnDelete.addEventListener('click', () => {
rejectCount++; rejectCount++;
if (rejectCount >= 5) { if (rejectCount >= 5) {
btnDelete.style.position = 'absolute'; btnDelete.style.position = 'absolute';
btnDelete.style.left = `${Math.random() * 80}%`; btnDelete.style.left = `${Math.random() * 80}%`;
btnDelete.style.top = `${Math.random() * 80}%`; btnDelete.style.top = `${Math.random() * 80}%`;
} }
target.happiness = Math.max(0.1, target.happiness - 0.1); // 每次点击拒绝，表情更委屈 target.happiness = Math.max(0.1, target.happiness - 0.1);
btnCancel.style.transform = `scale(${1 + rejectCount * 0.1})`; // 接受按钮变大 btnCancel.style.transform = `scale(${1 + rejectCount * 0.1})`;
updateBoi(); updateBoi();
}); });
acceptedSection.querySelector('a').addEventListener('click', () => { acceptedSection.querySelector('a').addEventListener('click', () => {
acceptedSection.classList.add('hidden'); acceptedSection.classList.add('hidden');
confirmSection.classList.remove('hidden'); confirmSection.classList.remove('hidden');
resetBoi(); resetBoi();
}); });
rejectedSection.querySelector('a').addEventListener('click', () => { rejectedSection.querySelector('a').addEventListener('click', () => {
rejectedSection.classList.add('hidden'); rejectedSection.classList.add('hidden');
confirmSection.classList.remove('hidden'); confirmSection.classList.remove('hidden');
resetBoi(); resetBoi();
}); });
function onMouseMove({ clientX: x, clientY: y }) { // 将 touch 事件转换为 mousemove 逻辑
let dx1 = x - btnDelete.getBoundingClientRect().x - btnDelete.getBoundingClientRect().width * 0.5; function onTouchMove(e) {
let dy1 = y - btnDelete.getBoundingClientRect().y - btnDelete.getBoundingClientRect().height * 0.5; e.preventDefault(); // 阻止默认滚动
let dx2 = x - btnCancel.getBoundingClientRect().x - btnCancel.getBoundingClientRect().width * 0.5; const touch = e.touches[0];
let dy2 = y - btnCancel.getBoundingClientRect().y - btnCancel.getBoundingClientRect().height * 0.5; if (!touch) return;
let px = (x - confirmSection.getBoundingClientRect().x) / confirmSection.getBoundingClientRect().width; onMouseMove({ clientX: touch.clientX, clientY: touch.clientY });
let py = (y - confirmSection.getBoundingClientRect().y) / confirmSection.getBoundingClientRect().height; }
let distDelete = Math.sqrt(dx1 * dx1 + dy1 * dy1);
let distCancel = Math.sqrt(dx2 * dx2 + dy2 * dy2); function onMouseMove({ clientX: x, clientY: y }) {
let happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75); const rectConfirm = confirmSection.getBoundingClientRect();
const rectDel = btnDelete.getBoundingClientRect();
const rectCan = btnCancel.getBoundingClientRect();
const dx1 = x - (rectDel.x + rectDel.width * 0.5);
const dy1 = y - (rectDel.y + rectDel.height * 0.5);
const dx2 = x - (rectCan.x + rectCan.width * 0.5);
const dy2 = y - (rectCan.y + rectCan.height * 0.5);
const px = (x - rectConfirm.x) / rectConfirm.width;
const py = (y - rectConfirm.y) / rectConfirm.height;
const distDelete = Math.hypot(dx1, dy1);
const distCancel = Math.hypot(dx2, dy2);
const happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75);
target.happiness = happiness; target.happiness = happiness;
target.derp = 0; target.derp = 0;
target.px = px; target.px = px;
target.py = py; target.py = py;
} }
function onMouseLeave() { function onMouseLeave() {
target.happiness = 0.9; target.happiness = 0.9;
target.derp = 1; target.derp = 1;
target.px = 0.5; target.px = 0.5;
target.py = 0.5; target.py = 0.5;
} }
function updateBoi() { function updateBoi() {
for (let prop in target) { for (let prop in target) {
if (target[prop] === current[prop]) { if (Math.abs(target[prop] - current[prop]) < 0.01) {
continue;
} else if (Math.abs(target[prop] - current[prop]) < 0.01) {
current[prop] = target[prop]; current[prop] = target[prop];
} else { } else {
current[prop] += (target[prop] - current[prop]) * 0.1; current[prop] += (target[prop] - current[prop]) * 0.1;
@ -84,9 +144,9 @@ const confirmSection = document.querySelector('.confirm');
boi.style.setProperty(`--${prop}`, current[prop]); boi.style.setProperty(`--${prop}`, current[prop]);
} }
requestAnimationFrame(updateBoi); requestAnimationFrame(updateBoi);
} }
function resetBoi() { function resetBoi() {
target.happiness = 0.9; target.happiness = 0.9;
target.derp = 1; target.derp = 1;
target.px = 0.5; target.px = 0.5;
@ -94,6 +154,6 @@ const confirmSection = document.querySelector('.confirm');
rejectCount = 0; rejectCount = 0;
btnCancel.style.transform = 'scale(1)'; btnCancel.style.transform = 'scale(1)';
btnDelete.style.position = 'static'; btnDelete.style.position = 'static';
} }
updateBoi(); updateBoi();

31
style.css
View File

@ -1,3 +1,8 @@
html, body {
touch-action: none;
overscroll-behavior: contain;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
font: inherit; font: inherit;
@ -23,6 +28,32 @@ body {
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
} }
.fake-cursor {
position: fixed;
width: 2rem;
height: 2rem;
pointer-events: none;
background: url('icon/move.svg') no-repeat center center;
background-size: contain;
z-index: 9999;
opacity: 0.8;
transition: transform 0.05s linear;
}
/* 仅在触摸设备显示虚拟鼠标 */
@media (pointer: coarse) {
.fake-cursor {
display: block;
}
}
/* 在精细指针设备（鼠标）隐藏虚拟鼠标 */
@media (pointer: fine) {
.fake-cursor {
display: none;
}
}
.confirm, .confirm,
.accepted, .accepted,
.rejected { .rejected {