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

258 lines
32 KiB
HTML
Raw Normal View History

'commit'
2025-09-08 08:39:40 +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;
font-family: "Microsoft YaHei", sans-serif;
background: #f0f8ff;
}
h2 {
text-align: center;
margin: 10px 0;
}
#map {
position: relative;
'commit'
2025-09-08 09:55:15 +08:00
width: 1200px;
'commit'
2025-09-08 08:39:40 +08:00
height: 840px;
margin: 0 auto;
border: 2px solid #333;
background: url("background.jpeg") no-repeat center/cover;
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#redFlag {
width: 30px;
height: 30px;
background: url("hongqi.jpg") no-repeat center/contain;
position: absolute;
'commit'
2025-09-08 08:41:56 +08:00
transform: translate(-50%, -50%); /* 使红旗中心对准路径 */
z-index: 10;
/* 添加备用背景样式，以防图片加载失败 */
background-color: red;
border-radius: 50% 0;
'commit'
2025-09-08 08:39:40 +08:00
}
#subtitle {
text-align: center;
margin-top: 10px;
font-size: 16px;
height: 24px;
}
#controls {
text-align: center;
margin-top: 10px;
}
button {
margin: 0 5px;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>红军长征路线动画演示</h2>
<div id="map">
'commit'
2025-09-08 09:55:15 +08:00
<svg viewBox="0 0 423.33332 296.3333">
'commit'
2025-09-08 08:39:40 +08:00
<!-- 路线 -->
<path id="route"
'commit'
2025-09-08 09:55:15 +08:00
d="m 215.41778,45.943321 c -0.21981,-0.109278 -0.42236,-0.264165 -0.65944,-0.327835 -0.0791,-0.02125 -0.14812,0.102698 -0.22891,0.08927 -0.26471,-0.04401 -0.50243,-0.193555 -0.76381,-0.254306 -0.17156,-0.03988 -0.352,-0.02114 -0.52643,-0.04557 -0.79616,-0.111511 -0.67475,-0.170516 -1.61594,-0.636749 -0.0785,0.03321 -0.15075,0.09028 -0.23546,0.09962 -0.34955,0.03857 -0.82153,-0.121862 -1.13428,-0.168976 -0.58727,-0.08847 -1.18935,-0.05386 -1.78043,-0.049 -0.20667,-0.0056 -0.43888,-0.116411 -0.62003,-0.01675 -0.11175,0.06148 0.0477,0.288732 -0.041,0.380436 -0.0963,0.0996 -0.2741,0.04465 -0.40716,0.08317 -0.10708,0.03099 -0.20166,0.09988 -0.31037,0.124515 -0.0984,0.02228 -0.6818,0.05273 -0.78572,0.05888 -0.529,0.09897 -1.06773,-0.06696 -1.59238,-0.0512 -0.2855,0.0086 -0.56304,0.09703 -0.84579,0.137498 -0.51999,0.04032 -0.78294,0.391385 -1.16478,0.668515 -0.11991,0.08702 -0.27433,0.122089 -0.3875,0.217697 -0.10048,0.08488 -0.16034,0.208544 -0.24051,0.312819 -0.11739,0.0861 -0.23477,0.172199 -0.35216,0.2583 -0.3851,0.137371 -0.69897,0.42609 -1.07857,0.573336 -0.6065,0.235254 -0.76066,0.0801 -1.24685,0.494371 -0.13912,0.118541 -0.21608,0.295691 -0.33882,0.431128 -0.14189,0.156586 -0.30226,0.295386 -0.45339,0.443079 -0.12529,0.160028 -0.29222,0.29486 -0.37588,0.480087 -0.082,0.181422 -0.0587,0.394385 -0.10639,0.58766 -0.49199,1.994348 0.17149,-0.987425 -0.44661,1.24386 -0.13289,0.479716 -0.18293,0.979122 -0.30111,1.462669 -0.002,0.241536 0.0243,0.484796 -0.005,0.724609 -0.0269,0.223896 -0.26161,0.932 -0.30969,1.166323 -0.12293,0.599136 -0.0564,1.200002 -0.0649,1.806715 -0.001,0.06148 -0.0247,1.049626 -0.004,1.122683 0.0752,0.269552 0.33487,0.480018 0.35921,0.758801 0.0152,0.173964 -0.16974,0.305237 -0.25294,0.458764 -0.0914,0.16868 -0.15861,0.352277 -0.27091,0.507833 -0.13811,0.191302 -0.31649,0.350018 -0.47473,0.525026 -0.34862,1.291326 6e-5,0.227981 -0.55462,1.398929 -0.10148,0.214246 -0.11897,0.474358 -0.26788,0.658818 -0.16447,0.203729 -0.46035,0.266777 -0.63605,0.460904 -1.47121,1.625518 0.79793,-0.250388 -0.97325,1.118383 -0.3596,0.486482 -0.32294,0.589333 -0.93513,0.790244 -0.22793,0.07481 -0.50248,0.0024 -0.70877,0.124844 -0.14246,0.08456 -0.0902,0.360484 -0.2373,0.436705 -0.23515,0.121849 -0.53116,0.03383 -0.78885,0.09501 -0.22816,0.05416 -0.43877,0.165679 -0.65815,0.248517 -1.80031,0.588145 -3.64598,0.127135 -5.47514,-0.03667 -0.79745,0.01225 -1.58937,-0.315206 -2.38922,-0.187323 -0.25643,0.041 -0.87974,0.27808 -1.13103,0.396471 -0.0418,0.09458 -0.0237,0.264795 -0.12532,0.283741 -0.53259,0.09927 -0.83991,-0.364656 -1.38015,-0.146891 -0.1433,0.05776 -0.11378,0.319037 -0.25128,0.389483 -0.21882,0.112096 -0.48753,0.06598 -0.72891,0.112662 -0.236,0.04564 -0.46812,0.109405 -0.70218,0.164105 -1.23626,0.518687 0.0201,0.02944 -1.32351,0.433118 -0.21459,0.06447 -0.41449,0.175381 -0.6322,0.228391 -0.25328,0.06167 -0.53504,0.009 -0.77369,0.113927 -0.16024,0.07041 -0.22769,0.267364 -0.35854,0.383611 -0.13536,0.120256 -0.29117,0.215297 -0.43676,0.322948 -0.92261,0.7142 -2.03561,1.145217 -3.0575,1.706157 -0.17306,0.09547 -0.3363,0.211455 -0.51918,0.286422 -0.39864,0.163407 -0.85496,0.165685 -1.24391,0.350944 -0.79514,0.378719 -0.0268,0.209939 -0.66241,0.727181 -0.1562,0.127119 -0.36576,0.168682 -0.54864,0.253023 -0.129,0.112371 -0.26538,0.216787 -0.38699,0.337109 -0.37475,0.370765 -0.27874,0.410458 -0.73623,0.688482 -0.23151,0.140693 -0.52434,0.187773 -0.72212,0.372902 -0.18635,0.174426 -0.13903,0.590938 -0.38404,0.662476 -0.4938,0.144175 -1.02664,-0.06715 -1.53996,-0.100729 -0.0179,0.272127 0.14347,0.62801 -0.0537,0.816382 -0.24084,0.230042 -0.66175,0.08962 -0.98376,0.174628 -0.26079,0.06885 -0.52364,0.150289 -0.75731,0.285017 -0.0555,0.03199 -0.98705,0.862478 -0.99228,0.876657 -0.0816,0.221173 0.0334,0.470297 0.0501,0.705443 -0.37735,0.08338 -1.31094,0.102457 -1.43079,0.727033 -0.062,0.323 0.30421,0.654494 0.19955,0.96629 -0.0301,0.08972 -1.70452,1.014005 -1.87808,1.098761 -0.17823,0.136459 -0.36698,0.260173 -0.53469,0.409374 -0.16315,0.145156 -0.28381,0.335804 -0.45511,0.471239 -0.57017,0.450768 -1.28875,0.696987 -1.890
stroke-width="2" fill="none" stroke-dasharray="4,4" />
'commit'
2025-09-08 08:39:40 +08:00
</svg>
<!-- 小红旗 -->
<div id="redFlag"></div>
</div>
<div id="subtitle">1934年10月 从江西瑞金出发</div>
<div id="controls">
<button onclick="play()">开始</button>
<button onclick="pause()">暂停</button>
<button onclick="reset()">重播</button>
</div>
<script>
const flag = document.getElementById("redFlag");
const subtitle = document.getElementById("subtitle");
'commit'
2025-09-08 08:41:56 +08:00
const route = document.getElementById("route");
const map = document.getElementById("map");
'commit'
2025-09-08 08:39:40 +08:00
const timeline = [
{ p: 0, text: "1934年10月 从江西瑞金出发" },
{ p: 10, text: "1934年11月 血战湘江" },
{ p: 20, text: "1935年1月 遵义会议" },
{ p: 35, text: "四渡赤水" },
{ p: 50, text: "强渡大渡河，飞夺泸定桥" },
{ p: 65, text: "翻越夹金山" },
{ p: 80, text: "穿越草地，懋功会师" },
{ p: 95, text: "1935年10月 到达吴起镇" }
];
'commit'
2025-09-08 08:41:56 +08:00
let animationId;
let startTime;
let pausedTime = 0;
let isPlaying = false;
const duration = 20000; // 20秒
// 获取SVG路径的总长度
const pathLength = route.getTotalLength();
// 根据进度百分比获取路径上的点
function getPointOnPath(percent) {
const distance = percent * pathLength / 100;
const point = route.getPointAtLength(distance);
'commit'
2025-09-08 08:42:57 +08:00
// 将SVG坐标转换为页面坐标
const svgPoint = route.ownerSVGElement.createSVGPoint();
svgPoint.x = point.x;
svgPoint.y = point.y;
const matrix = route.ownerSVGElement.getScreenCTM();
const transformedPoint = svgPoint.matrixTransform(matrix);
// 转换为相对于#map容器的坐标
'commit'
2025-09-08 08:41:56 +08:00
const mapRect = map.getBoundingClientRect();
return {
'commit'
2025-09-08 08:42:57 +08:00
x: transformedPoint.x - mapRect.left,
y: transformedPoint.y - mapRect.top
'commit'
2025-09-08 08:41:56 +08:00
};
}
// 更新红旗位置
function updateFlagPosition(percent) {
'commit'
2025-09-08 09:55:15 +08:00
// 获取SVG元素和路径
const svg = document.querySelector('svg');
const path = document.querySelector('#route');
const pathLength = path.getTotalLength();
const point = path.getPointAtLength(pathLength * percent / 100);
// 仅在动画进行中输出（避免与初始坐标重复）
if (percent > 0) {
console.log(`SVG实时坐标: (${point.x.toFixed(6)}, ${point.y.toFixed(6)})`);
}
// 转换为页面坐标
const svgPoint = svg.createSVGPoint();
svgPoint.x = point.x;
svgPoint.y = point.y;
const screenPoint = svgPoint.matrixTransform(svg.getScreenCTM());
// 设置红旗位置
const mapRect = map.getBoundingClientRect();
const x = screenPoint.x - mapRect.left;
const y = screenPoint.y - mapRect.top;
flag.style.left = `${x}px`;
flag.style.top = `${y}px`;
'commit'
2025-09-08 08:41:56 +08:00
}
// 动画循环
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime + pausedTime;
const progress = Math.min(elapsed / duration, 1) * 100;
updateFlagPosition(progress);
updateSubtitle(progress);
if (progress < 100) {
animationId = requestAnimationFrame(animate);
} else {
isPlaying = false;
}
}
'commit'
2025-09-08 08:39:40 +08:00
function play() {
'commit'
2025-09-08 08:41:56 +08:00
if (!isPlaying) {
isPlaying = true;
startTime = null;
animationId = requestAnimationFrame(animate);
}
'commit'
2025-09-08 08:39:40 +08:00
}
function pause() {
'commit'
2025-09-08 08:41:56 +08:00
if (isPlaying) {
isPlaying = false;
cancelAnimationFrame(animationId);
if (startTime) {
pausedTime += performance.now() - startTime;
}
}
'commit'
2025-09-08 08:39:40 +08:00
}
function reset() {
'commit'
2025-09-08 08:41:56 +08:00
pause();
pausedTime = 0;
updateFlagPosition(0);
'commit'
2025-09-08 08:39:40 +08:00
subtitle.textContent = timeline[0].text;
}
'commit'
2025-09-08 08:41:56 +08:00
function updateSubtitle(percent) {
'commit'
2025-09-08 08:39:40 +08:00
for (let i = timeline.length - 1; i >= 0; i--) {
if (percent >= timeline[i].p) {
subtitle.textContent = timeline[i].text;
break;
}
}
}
'commit'
2025-09-08 08:41:56 +08:00
// 页面加载完成后初始化红旗位置
window.addEventListener('load', function() {
// 确保红旗在初始位置可见
updateFlagPosition(0);
// 检查红旗图片是否加载成功
const img = new Image();
img.onload = function() {
// 图片加载成功，使用图片作为背景
flag.style.backgroundImage = 'url("hongqi.jpg")';
flag.style.backgroundColor = 'transparent';
};
img.onerror = function() {
// 图片加载失败，使用备用样式
console.warn('红旗图片加载失败，使用备用样式');
flag.style.backgroundImage = 'none';
flag.style.backgroundColor = 'red';
};
img.src = 'hongqi.jpg';
});
'commit'
2025-09-08 09:55:15 +08:00
// 添加页面加载完成事件监听
document.addEventListener('DOMContentLoaded', function() {
// 确保SVG和图片加载完成后执行
setTimeout(function() {
// 输出初始SVG坐标
logInitialSVGCoordinates();
}, 100); // 短暂延迟确保资源加载完成
});
// 初始SVG坐标日志（仅输出一次）
function logInitialSVGCoordinates() {
const path = document.querySelector('#route');
const point = path.getPointAtLength(0); // 路径起点
console.log(`SVG初始坐标: (${point.x.toFixed(6)}, ${point.y.toFixed(6)})`);
}
'commit'
2025-09-08 08:39:40 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink