288 lines
10 KiB
HTML
288 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.background-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
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%);
|
|
z-index: 999;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.arrow {
|
|
cursor: grab;
|
|
transition: transform 0s;
|
|
}
|
|
|
|
.arrow:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.control-panel {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
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;
|
|
}
|
|
|
|
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%);
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="background-container">
|
|
<div class="arrow-container">
|
|
<!-- 左侧箭头 - 使用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="control-panel">
|
|
<button id="startBtn">开始移动</button>
|
|
</div>
|
|
<div class="position-controls">
|
|
<button id="saveBtn">保存位置</button>
|
|
<button id="resetBtn">重置默认</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
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 draggedElement = null;
|
|
let initialX = 0;
|
|
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) {
|
|
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);
|
|
alert('加载保存的位置失败，请重试');
|
|
}
|
|
}
|
|
|
|
// 保存当前位置到localStorage
|
|
function saveCurrentPositions() {
|
|
try {
|
|
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('保存位置失败，请重试');
|
|
}
|
|
}
|
|
|
|
// 重置到默认位置
|
|
function resetToDefaultPositions() {
|
|
localStorage.removeItem('arrowLeftPosition');
|
|
localStorage.removeItem('arrowRightPosition');
|
|
leftArrow.style.transform = 'translate(-100px, 70px)';
|
|
rightArrow.style.transform = 'translate(350px, 70px) scale(-1, 1)';
|
|
alert('已重置为默认位置');
|
|
}
|
|
|
|
// 获取元素的transform translate值
|
|
function getTransformValues(element) {
|
|
const transform = window.getComputedStyle(element).getPropertyValue('transform');
|
|
if (transform === 'none') return { x: 0, y: 0 };
|
|
|
|
const matrix = new DOMMatrix(transform);
|
|
return { x: matrix.e, y: matrix.f };
|
|
}
|
|
|
|
// 开始拖动
|
|
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 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;
|
|
startBtn.disabled = true;
|
|
startBtn.textContent = '移动中...';
|
|
saveBtn.disabled = true;
|
|
|
|
const leftStart = getTransformValues(leftArrow);
|
|
const rightStart = getTransformValues(rightArrow);
|
|
const duration = 2000; // 2秒
|
|
const startTime = performance.now();
|
|
|
|
function updateAnimation(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// 左侧箭头从当前位置移动到(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) {
|
|
requestAnimationFrame(updateAnimation);
|
|
} else {
|
|
isAnimating = false;
|
|
startBtn.disabled = false;
|
|
startBtn.textContent = '重新开始';
|
|
saveBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateAnimation);
|
|
}
|
|
|
|
// 事件监听
|
|
leftArrow.addEventListener('mousedown', startDrag);
|
|
rightArrow.addEventListener('mousedown', startDrag);
|
|
startBtn.addEventListener('click', animateArrows);
|
|
saveBtn.addEventListener('click', saveCurrentPositions);
|
|
resetBtn.addEventListener('click', resetToDefaultPositions);
|
|
|
|
// 页面加载时加载保存的位置
|
|
window.addEventListener('load', loadSavedPositions);
|
|
</script>
|
|
</body>
|
|
</html> |