huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c5c79d2e675da9186fa61b563cfb84e6c8177b62
dsProject/dsLightRag/XingJun/move.html

289 lines
11 KiB
HTML
Raw Normal View History

'commit'
2025-09-09 07:33:51 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头移动动画</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.background-container {
position: relative;
width: 100%;
height: 100vh;
background-image: url('background.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.arrow-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 200px;
z-index: 999;
}
'commit'
2025-09-09 07:39:54 +08:00
.control-panel {
'commit'
2025-09-09 07:33:51 +08:00
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
'commit'
2025-09-09 07:39:54 +08:00
display: flex;
gap: 10px;
z-index: 1000;
}
button {
'commit'
2025-09-09 07:33:51 +08:00
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
'commit'
2025-09-09 07:39:54 +08:00
}
.param-display {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 8px 15px;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
'commit'
2025-09-09 07:33:51 +08:00
z-index: 1000;
}
</style>
</head>
<body>
<div class="background-container">
<div class="arrow-container">
<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
<!-- 左侧箭头 -->
<path id="outlineArrowLeft"
d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z"
fill="red"
stroke="black"
stroke-width="2"/>
<!-- 右侧箭头 -->
<path id="outlineArrowRight"
d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z"
fill="red"
stroke="black"
stroke-width="2"/>
</svg>
</div>
'commit'
2025-09-09 07:39:54 +08:00
<div class="param-display" id="paramDisplay"></div>
<div class="control-panel">
<button id="startButton">开始移动</button>
<button id="saveButton">保存位置</button>
<button id="resetButton">重置默认</button>
</div>
'commit'
2025-09-09 07:33:51 +08:00
</div>
<script>
const arrowLeft = document.getElementById('outlineArrowLeft');
const arrowRight = document.getElementById('outlineArrowRight');
const startButton = document.getElementById('startButton');
'commit'
2025-09-09 07:39:54 +08:00
const saveButton = document.getElementById('saveButton');
const resetButton = document.getElementById('resetButton');
'commit'
2025-09-09 07:33:51 +08:00
let animationId = null;
let isAnimating = false;
'commit'
2025-09-09 07:39:54 +08:00
let isDraggingLeft = false;
let isDraggingRight = false;
let initialX = 0;
let initialLeftPos = 0;
let initialRightPos = 0;
// 默认位置配置
const DEFAULT_POSITIONS = {
left: 'translate(-100px, 0)',
right: 'translate(350px, 0) scale(-1, 1)'
};
// 从localStorage加载保存的位置
function loadSavedPositions() {
try {
const savedLeft = localStorage.getItem('arrowLeftPosition');
const savedRight = localStorage.getItem('arrowRightPosition');
if (savedLeft && savedRight) {
arrowLeft.style.transform = savedLeft;
arrowRight.style.transform = savedRight;
return true;
}
} catch (e) {
console.error('加载保存位置失败:', e);
}
// 加载失败或无保存数据时使用默认位置
arrowLeft.style.transform = DEFAULT_POSITIONS.left;
arrowRight.style.transform = DEFAULT_POSITIONS.right;
return false;
}
// 保存当前位置到localStorage
function saveCurrentPositions() {
try {
const leftTransform = arrowLeft.style.transform;
const rightTransform = arrowRight.style.transform;
localStorage.setItem('arrowLeftPosition', leftTransform);
localStorage.setItem('arrowRightPosition', rightTransform);
alert('位置已保存！下次打开将自动应用当前位置');
return true;
} catch (e) {
console.error('保存位置失败:', e);
alert('保存失败，请重试');
return false;
}
}
// 重置为默认位置
function resetToDefaultPositions() {
if (confirm('确定要重置为默认位置吗？')) {
localStorage.removeItem('arrowLeftPosition');
localStorage.removeItem('arrowRightPosition');
arrowLeft.style.transform = DEFAULT_POSITIONS.left;
arrowRight.style.transform = DEFAULT_POSITIONS.right;
updateParamDisplay();
}
}
'commit'
2025-09-09 07:33:51 +08:00
// 初始化箭头位置
'commit'
2025-09-09 07:39:54 +08:00
function initArrowPositions() {
const hasSaved = loadSavedPositions();
updateParamDisplay();
// 显示加载状态
if (hasSaved) {
console.log('已加载保存的位置');
} else {
console.log('使用默认位置');
}
}
// 解析translateX值
function parseTranslateX(transform) {
const matrix = new DOMMatrix(transform);
return matrix.e;
}
// 更新参数显示
function updateParamDisplay() {
const leftTransform = arrowLeft.style.transform;
const rightTransform = arrowRight.style.transform;
document.getElementById('paramDisplay').textContent =
`左侧箭头: ${leftTransform} | 右侧箭头: ${rightTransform}`;
}
// 动画控制函数
'commit'
2025-09-09 07:33:51 +08:00
function startAnimation() {
if (isAnimating) return;
'commit'
2025-09-09 07:39:54 +08:00
'commit'
2025-09-09 07:33:51 +08:00
isAnimating = true;
startButton.disabled = true;
startButton.textContent = "移动中...";
'commit'
2025-09-09 07:39:54 +08:00
saveButton.disabled = true;
const duration = 2000;
'commit'
2025-09-09 07:33:51 +08:00
const startTime = performance.now();
'commit'
2025-09-09 07:39:54 +08:00
const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
'commit'
2025-09-09 07:33:51 +08:00
const endLeft = 0;
const endRight = 250;
'commit'
2025-09-09 07:39:54 +08:00
'commit'
2025-09-09 07:33:51 +08:00
function animate(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const currentLeft = startLeft + (endLeft - startLeft) * progress;
const currentRight = startRight + (endRight - startRight) * progress;
'commit'
2025-09-09 07:39:54 +08:00
'commit'
2025-09-09 07:33:51 +08:00
arrowLeft.style.transform = `translate(${currentLeft}px, 0)`;
arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`;
'commit'
2025-09-09 07:39:54 +08:00
updateParamDisplay();
'commit'
2025-09-09 07:33:51 +08:00
if (progress < 1) {
animationId = requestAnimationFrame(animate);
} else {
isAnimating = false;
startButton.disabled = false;
startButton.textContent = "重新开始";
'commit'
2025-09-09 07:39:54 +08:00
saveButton.disabled = false;
'commit'
2025-09-09 07:33:51 +08:00
}
}
'commit'
2025-09-09 07:39:54 +08:00
'commit'
2025-09-09 07:33:51 +08:00
animationId = requestAnimationFrame(animate);
}
'commit'
2025-09-09 07:39:54 +08:00
// 绑定拖动事件
function bindDragEvents() {
// 左侧箭头拖动
arrowLeft.style.cursor = 'grab';
arrowLeft.addEventListener('mousedown', (e) => {
if (isAnimating) return;
isDraggingLeft = true;
initialX = e.clientX;
initialLeftPos = parseTranslateX(getComputedStyle(arrowLeft).transform);
arrowLeft.style.cursor = 'grabbing';
e.preventDefault();
});
// 右侧箭头拖动
arrowRight.style.cursor = 'grab';
arrowRight.addEventListener('mousedown', (e) => {
if (isAnimating) return;
isDraggingRight = true;
initialX = e.clientX;
initialRightPos = parseTranslateX(getComputedStyle(arrowRight).transform);
arrowRight.style.cursor = 'grabbing';
e.preventDefault();
});
// 鼠标移动
document.addEventListener('mousemove', (e) => {
if (isDraggingLeft) {
const deltaX = e.clientX - initialX;
const newPos = initialLeftPos + deltaX;
arrowLeft.style.transform = `translate(${newPos}px, 0)`;
updateParamDisplay();
} else if (isDraggingRight) {
const deltaX = e.clientX - initialX;
const newPos = initialRightPos + deltaX;
arrowRight.style.transform = `translate(${newPos}px, 0) scale(-1, 1)`;
updateParamDisplay();
}
});
// 鼠标释放
document.addEventListener('mouseup', () => {
if (isDraggingLeft || isDraggingRight) {
isDraggingLeft = false;
isDraggingRight = false;
arrowLeft.style.cursor = 'grab';
arrowRight.style.cursor = 'grab';
}
});
}
// 绑定按钮事件
function bindButtonEvents() {
startButton.addEventListener('click', startAnimation);
saveButton.addEventListener('click', saveCurrentPositions);
resetButton.addEventListener('click', resetToDefaultPositions);
}
// 初始化
function init() {
initArrowPositions();
bindDragEvents();
bindButtonEvents();
}
// 启动应用
init();
'commit'
2025-09-09 07:33:51 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink