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

353
dsLightRag/XingJun/move.html
View File

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