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:39:54 +08:00
parent f6b05da402
commit c5c79d2e67
1 changed files with 188 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
dsLightRag/XingJun/move.html
View File

@@ -32,14 +32,30 @@
height: 200px; height: 200px;
z-index: 999; z-index: 999;
} }
button { .control-panel {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 1000;
}
button {
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
}
.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;
z-index: 1000; z-index: 1000;
} }
</style> </style>
@@ -47,7 +63,6 @@
<body> <body>
<div class="background-container"> <div class="background-container">
<div class="arrow-container"> <div class="arrow-container">
<!-- 简化的箭头SVG，确保可见 -->
<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg"> <svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
<!-- 左侧箭头 --> <!-- 左侧箭头 -->
<path id="outlineArrowLeft" <path id="outlineArrowLeft"
@@ -64,69 +79,211 @@
stroke-width="2"/> stroke-width="2"/>
</svg> </svg>
</div> </div>
<button id="startButton">开始移动</button> <div class="param-display" id="paramDisplay"></div>
<div class="control-panel">
<button id="startButton">开始移动</button>
<button id="saveButton">保存位置</button>
<button id="resetButton">重置默认</button>
</div>
</div> </div>
<script> <script>
// 简化的动画逻辑
// 获取DOM元素（确保只获取新箭头）
const arrowLeft = document.getElementById('outlineArrowLeft'); const arrowLeft = document.getElementById('outlineArrowLeft');
const arrowRight = document.getElementById('outlineArrowRight'); const arrowRight = document.getElementById('outlineArrowRight');
const startButton = document.getElementById('startButton'); const startButton = document.getElementById('startButton');
const saveButton = document.getElementById('saveButton');
const resetButton = document.getElementById('resetButton');
let animationId = null; let animationId = null;
let isAnimating = false; let isAnimating = false;
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();
}
}
// 初始化箭头位置 // 初始化箭头位置
arrowLeft.style.transform = 'translate(-100px, 0)'; function initArrowPositions() {
// 调整右侧箭头初始位置，使其在SVG可见区域内 const hasSaved = loadSavedPositions();
arrowRight.style.transform = 'translate(350px, 0) scale(-1, 1)'; 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}`;
}
// 动画控制函数
function startAnimation() { function startAnimation() {
if (isAnimating) return; if (isAnimating) return;
isAnimating = true; isAnimating = true;
startButton.disabled = true; startButton.disabled = true;
startButton.textContent = "移动中..."; startButton.textContent = "移动中...";
saveButton.disabled = true;
const duration = 2000; // 动画持续时间（毫秒）
const duration = 2000;
const startTime = performance.now(); const startTime = performance.now();
// 初始位置 const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
const startLeft = -100; const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
// 右侧箭头初始位置调整为350px（原600px超出可见区域）
const startRight = 350;
// 目标位置
const endLeft = 0; const endLeft = 0;
// 右侧箭头目标位置调整为250px
const endRight = 250; const endRight = 250;
function animate(currentTime) { function animate(currentTime) {
const elapsedTime = currentTime - startTime; const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1); const progress = Math.min(elapsedTime / duration, 1);
// 计算当前位置
const currentLeft = startLeft + (endLeft - startLeft) * progress; const currentLeft = startLeft + (endLeft - startLeft) * progress;
const currentRight = startRight + (endRight - startRight) * progress; const currentRight = startRight + (endRight - startRight) * progress;
// 更新箭头位置
arrowLeft.style.transform = `translate(${currentLeft}px, 0)`; arrowLeft.style.transform = `translate(${currentLeft}px, 0)`;
arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`; arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`;
updateParamDisplay();
if (progress < 1) { if (progress < 1) {
animationId = requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
} else { } else {
// 动画完成
isAnimating = false; isAnimating = false;
startButton.disabled = false; startButton.disabled = false;
startButton.textContent = "重新开始"; startButton.textContent = "重新开始";
saveButton.disabled = false;
} }
} }
animationId = requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
} }
// 绑定按钮点击事件 // 绑定拖动事件
startButton.addEventListener('click', startAnimation); 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();
</script> </script>
</body> </body>
</html> </html>