huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-09 07:46:47 +08:00
parent c5c79d2e67
commit 43f69d19c7
1 changed files with 178 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
dsLightRag/XingJun/move.html
View File

@@ -1,37 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="en">
<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>箭头动画</title>
<style> <style>
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.background-container { .background-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-image: url('background.png'); background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: 1;
} }
.arrow-container { .arrow-container {
position: absolute; position: absolute;
width: 600px;
height: 200px;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 600px;
height: 200px;
z-index: 999; z-index: 999;
border: 2px solid transparent;
} }
.arrow {
cursor: grab;
transition: transform 0s;
}
.arrow:active {
cursor: grabbing;
}
.control-panel { .control-panel {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
@@ -41,21 +56,34 @@
gap: 10px; gap: 10px;
z-index: 1000; z-index: 1000;
} }
button { button {
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
} }
.param-display {
button:hover:not(:disabled) {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.position-controls {
position: absolute; position: absolute;
bottom: 80px; bottom: 80px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8); display: flex;
padding: 8px 15px; gap: 10px;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000; z-index: 1000;
} }
</style> </style>
@@ -63,227 +91,198 @@
<body> <body>
<div class="background-container"> <div class="background-container">
<div class="arrow-container"> <div class="arrow-container">
<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg"> <!-- 左侧箭头 - 使用fill.html中的原始路径数据 -->
<!-- 左侧箭头 --> <svg id="outlineArrowLeft" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(-100px, 70px);">
<path id="outlineArrowLeft" <path 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>
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" </svg>
fill="red" <!-- 右侧箭头 - 使用fill.html中的原始路径数据并水平翻转 -->
stroke="black" <svg id="outlineArrowRight" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(350px, 70px) scale(-1, 1);">
stroke-width="2"/> <path 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>
<!-- 右侧箭头 -->
<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> </svg>
</div> </div>
<div class="param-display" id="paramDisplay"></div>
<div class="control-panel"> <div class="control-panel">
<button id="startButton">开始移动</button> <button id="startBtn">开始移动</button>
<button id="saveButton">保存位置</button> </div>
<button id="resetButton">重置默认</button> <div class="position-controls">
<button id="saveBtn">保存位置</button>
<button id="resetBtn">重置默认</button>
</div> </div>
</div> </div>
<script> <script>
const arrowLeft = document.getElementById('outlineArrowLeft'); const leftArrow = document.getElementById('outlineArrowLeft');
const arrowRight = document.getElementById('outlineArrowRight'); const rightArrow = document.getElementById('outlineArrowRight');
const startButton = document.getElementById('startButton'); const startBtn = document.getElementById('startBtn');
const saveButton = document.getElementById('saveButton'); const saveBtn = document.getElementById('saveBtn');
const resetButton = document.getElementById('resetButton'); const resetBtn = document.getElementById('resetBtn');
let animationId = null;
let isAnimating = false; let isAnimating = false;
let isDraggingLeft = false; let draggedElement = null;
let isDraggingRight = false;
let initialX = 0; let initialX = 0;
let initialLeftPos = 0; let initialY = 0;
let initialRightPos = 0; let currentX = 0;
let currentY = 0;
// 默认位置配置 let translateX = 0;
const DEFAULT_POSITIONS = { let translateY = 0;
left: 'translate(-100px, 0)',
right: 'translate(350px, 0) scale(-1, 1)'
};
// 从localStorage加载保存的位置 // 从localStorage加载保存的位置
function loadSavedPositions() { function loadSavedPositions() {
try { try {
const savedLeft = localStorage.getItem('arrowLeftPosition'); const savedLeft = localStorage.getItem('arrowLeftPosition');
const savedRight = localStorage.getItem('arrowRightPosition'); const savedRight = localStorage.getItem('arrowRightPosition');
if (savedLeft && savedRight) {
arrowLeft.style.transform = savedLeft; if (savedLeft) {
arrowRight.style.transform = savedRight; const { x, y } = JSON.parse(savedLeft);
return true; leftArrow.style.transform = `translate(${x}px, ${y}px)`;
}
if (savedRight) {
const { x, y } = JSON.parse(savedRight);
rightArrow.style.transform = `translate(${x}px, ${y}px) scale(-1, 1)`;
} }
} catch (e) { } catch (e) {
console.error('加载保存位置失败:', e); console.error('加载保存的位置失败:', e);
alert('加载保存的位置失败，请重试');
} }
// 加载失败或无保存数据时使用默认位置
arrowLeft.style.transform = DEFAULT_POSITIONS.left;
arrowRight.style.transform = DEFAULT_POSITIONS.right;
return false;
} }
// 保存当前位置到localStorage // 保存当前位置到localStorage
function saveCurrentPositions() { function saveCurrentPositions() {
try { try {
const leftTransform = arrowLeft.style.transform; const leftTransform = getTransformValues(leftArrow);
const rightTransform = arrowRight.style.transform; const rightTransform = getTransformValues(rightArrow);
localStorage.setItem('arrowLeftPosition', leftTransform);
localStorage.setItem('arrowRightPosition', rightTransform); localStorage.setItem('arrowLeftPosition', JSON.stringify({
alert('位置已保存！下次打开将自动应用当前位置'); x: leftTransform.x,
return true; y: leftTransform.y
}));
localStorage.setItem('arrowRightPosition', JSON.stringify({
x: rightTransform.x,
y: rightTransform.y
}));
alert('位置已保存');
} catch (e) { } catch (e) {
console.error('保存位置失败:', e); console.error('保存位置失败:', e);
alert('保存失败，请重试'); alert('保存位置失败，请重试');
return false;
} }
} }
// 重置为默认位置 // 重置到默认位置
function resetToDefaultPositions() { function resetToDefaultPositions() {
if (confirm('确定要重置为默认位置吗？')) { localStorage.removeItem('arrowLeftPosition');
localStorage.removeItem('arrowLeftPosition'); localStorage.removeItem('arrowRightPosition');
localStorage.removeItem('arrowRightPosition'); leftArrow.style.transform = 'translate(-100px, 70px)';
arrowLeft.style.transform = DEFAULT_POSITIONS.left; rightArrow.style.transform = 'translate(350px, 70px) scale(-1, 1)';
arrowRight.style.transform = DEFAULT_POSITIONS.right; alert('已重置为默认位置');
updateParamDisplay();
}
} }
// 初始化箭头位置 // 获取元素的transform translate值
function initArrowPositions() { function getTransformValues(element) {
const hasSaved = loadSavedPositions(); const transform = window.getComputedStyle(element).getPropertyValue('transform');
updateParamDisplay(); if (transform === 'none') return { x: 0, y: 0 };
// 显示加载状态
if (hasSaved) {
console.log('已加载保存的位置');
} else {
console.log('使用默认位置');
}
}
// 解析translateX值
function parseTranslateX(transform) {
const matrix = new DOMMatrix(transform); const matrix = new DOMMatrix(transform);
return matrix.e; return { x: matrix.e, y: matrix.f };
} }
// 更新参数显示 // 开始拖动
function updateParamDisplay() { function startDrag(e) {
const leftTransform = arrowLeft.style.transform; if (isAnimating) return;
const rightTransform = arrowRight.style.transform;
document.getElementById('paramDisplay').textContent = draggedElement = e.target.closest('.arrow');
`左侧箭头: ${leftTransform} | 右侧箭头: ${rightTransform}`; if (!draggedElement) return;
const transform = getTransformValues(draggedElement);
translateX = transform.x;
translateY = transform.y;
initialX = e.clientX - translateX;
initialY = e.clientY - translateY;
draggedElement.style.zIndex = '1001';
draggedElement.style.transition = 'transform 0s';
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
} }
// 动画控制函数 // 拖动中
function startAnimation() { function drag(e) {
if (!draggedElement) return;
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
// 保持右侧箭头的翻转效果
if (draggedElement.id === 'outlineArrowRight') {
draggedElement.style.transform = `translate(${currentX}px, ${currentY}px) scale(-1, 1)`;
} else {
draggedElement.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
}
// 停止拖动
function stopDrag() {
if (draggedElement) {
draggedElement.style.zIndex = '';
draggedElement = null;
}
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDrag);
}
// 箭头动画
function animateArrows() {
if (isAnimating) return; if (isAnimating) return;
isAnimating = true; isAnimating = true;
startButton.disabled = true; startBtn.disabled = true;
startButton.textContent = "移动中..."; startBtn.textContent = '移动中...';
saveButton.disabled = true; saveBtn.disabled = true;
const duration = 2000; const leftStart = getTransformValues(leftArrow);
const rightStart = getTransformValues(rightArrow);
const duration = 2000; // 2秒
const startTime = performance.now(); const startTime = performance.now();
const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
const endLeft = 0;
const endRight = 250;
function animate(currentTime) { function updateAnimation(currentTime) {
const elapsedTime = currentTime - startTime; const elapsed = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1); const progress = Math.min(elapsed / duration, 1);
const currentLeft = startLeft + (endLeft - startLeft) * progress;
const currentRight = startRight + (endRight - startRight) * progress;
arrowLeft.style.transform = `translate(${currentLeft}px, 0)`; // 左侧箭头从当前位置移动到(0, 70)
arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`; const leftX = leftStart.x + (0 - leftStart.x) * progress;
updateParamDisplay(); const leftY = leftStart.y + (70 - leftStart.y) * progress;
leftArrow.style.transform = `translate(${leftX}px, ${leftY}px)`;
// 右侧箭头从当前位置移动到(250, 70)，保持翻转
const rightX = rightStart.x + (250 - rightStart.x) * progress;
const rightY = rightStart.y + (70 - rightStart.y) * progress;
rightArrow.style.transform = `translate(${rightX}px, ${rightY}px) scale(-1, 1)`;
if (progress < 1) { if (progress < 1) {
animationId = requestAnimationFrame(animate); requestAnimationFrame(updateAnimation);
} else { } else {
isAnimating = false; isAnimating = false;
startButton.disabled = false; startBtn.disabled = false;
startButton.textContent = "重新开始"; startBtn.textContent = '重新开始';
saveButton.disabled = false; saveBtn.disabled = false;
} }
} }
animationId = requestAnimationFrame(animate); requestAnimationFrame(updateAnimation);
} }
// 绑定拖动事件 // 事件监听
function bindDragEvents() { leftArrow.addEventListener('mousedown', startDrag);
// 左侧箭头拖动 rightArrow.addEventListener('mousedown', startDrag);
arrowLeft.style.cursor = 'grab'; startBtn.addEventListener('click', animateArrows);
arrowLeft.addEventListener('mousedown', (e) => { saveBtn.addEventListener('click', saveCurrentPositions);
if (isAnimating) return; resetBtn.addEventListener('click', resetToDefaultPositions);
isDraggingLeft = true;
initialX = e.clientX;
initialLeftPos = parseTranslateX(getComputedStyle(arrowLeft).transform);
arrowLeft.style.cursor = 'grabbing';
e.preventDefault();
});
// 右侧箭头拖动 // 页面加载时加载保存的位置
arrowRight.style.cursor = 'grab'; window.addEventListener('load', loadSavedPositions);
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();
</script> </script>
</body> </body>
</html> </html>