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

224 lines
76 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 11:57:20 +08:00
d="m 351.72538,280.07156 c -2.21797,-0.0762 0.46456,-0.16811 -0.85248,0.34825 -0.43535,0.17068 -0.94994,-0.0686 -1.40185,0.0515 -1.25325,0.33314 0.95973,0.2299 -0.96938,0.21781 -0.12239,0.0539 -0.25058,0.0962 -0.36718,0.16163 -0.0985,0.0553 -0.16907,0.1583 -0.27456,0.19878 -0.16193,0.0621 -0.85133,0.0942 -0.88395,0.1334 -0.53689,0.64532 0.82899,0.30012 -0.35155,0.47588 -0.14756,0.0164 -0.29443,0.0568 -0.4427,0.049 -0.36351,-0.019 -0.71456,-0.14219 -1.07561,-0.18859 -0.58648,-0.0754 -0.52443,0.0132 -1.13612,-0.20633 -0.30544,-0.10961 -0.59677,-0.25511 -0.89514,-0.38264 -0.72006,-0.047 -1.34207,-0.42023 -2.00642,-0.65045 -1.52355,-0.52797 0.91155,0.44987 -0.87299,-0.28874 -0.15888,-0.0508 -0.31274,-0.12136 -0.47662,-0.1525 -0.0999,-0.019 -0.20426,0.0183 -0.3049,0.004 -0.58963,-0.0826 -1.26585,-0.25387 -1.87156,-0.35717 -0.81177,0.0201 -1.62555,0.13169 -2.42102,-0.079 -0.0997,-0.0143 -0.19955,-0.0275 -0.29903,-0.0432 -0.23016,-0.0365 -0.4064,-0.0556 -0.61997,-0.15825 -0.096,-0.0461 -0.36267,-0.22328 -0.2693,-0.17203 2.53961,1.39369 3.33754,2.02655 2.26068,1.20216 -0.68024,-0.48027 -1.43322,-0.83354 -2.07912,-1.36596 -1.23798,-0.69162 -2.44639,-1.48712 -3.70485,-2.12471 -0.0599,-0.0303 -0.11528,0.0937 -0.18204,0.0863 -0.42333,-0.0467 -0.82325,-0.21982 -1.23912,-0.31178 -0.40635,-0.0346 -1.38665,-0.3551 -1.7758,-0.24257 -0.0915,0.0265 -0.0617,0.22709 -0.15613,0.23931 -0.21868,0.0283 -0.42998,-0.0992 -0.64749,-0.13531 -0.17188,-0.0285 -0.34626,-0.039 -0.51938,-0.0585 -0.75769,-0.10612 -1.54395,0.0457 -2.29296,-0.0821 -0.75366,-0.3134 -1.55315,-0.37219 -2.35146,-0.48302 -0.095,0 -1.47984,-0.0744 -1.48899,-0.0589 -0.3865,0.65662 0.64775,0.20424 -0.0876,0.46128 -0.66088,0.34718 -0.2312,0.0679 -0.97841,0.095 -0.0735,0.003 -0.61547,0.37745 -0.67961,0.42778 -0.19685,-0.005 -0.40372,-0.0781 -0.59052,-0.0159 -0.10988,0.0367 -0.13631,0.18733 -0.2045,0.28096 -0.27363,-0.0416 -0.55038,-0.18322 -0.82092,-0.1247 -0.11991,0.0259 -0.0355,0.29721 -0.15216,0.33515 -0.96962,0.31528 -0.56825,-0.44802 -0.8346,0.25522 -2.32326,-0.52382 -0.076,-0.25633 -1.00166,0.0407 -0.15976,0.0513 -0.33888,-0.0251 -0.50329,0.008 -0.1877,0.0383 -0.63148,0.31089 -0.8228,0.40595 -0.63297,0.29292 -0.65387,-0.0116 -1.24561,0.0106 -0.0904,0.003 -0.13457,0.1237 -0.21415,0.16677 -0.17878,0.0968 -0.37873,0.14883 -0.56229,0.23622 -0.0426,0.0889 -0.0298,0.25625 -0.12775,0.26654 -0.2582,0.0271 -0.49979,-0.16682 -0.75935,-0.17338 -0.008,-1.8e-4 -0.70011,0.28355 -0.7144,0.28612 -0.88487,0.15857 -0.263,-0.1587 -0.84934,0.20347 -0.21283,-0.014 -0.42749,-0.0731 -0.63849,-0.0419 -0.16082,0.0238 -0.49218,0.31358 -0.64212,0.37573 -0.33295,0.13801 -0.75935,0.18288 -1.11387,0.22921 -0.12946,0.0148 -0.26183,0.0138 -0.38841,0.0446 -0.0998,0.0243 -0.1828,0.10165 -0.2839,0.12001 -0.57515,0.10446 -1.15559,-0.0919 -1.7363,0.0156 -0.71776,0.13989 -1.4183,0.341 -2.1363,0.48414 -1.03587,0.0829 -2.06787,0.19862 -3.1089,0.19934 -0.71597,-0.0788 -1.45344,0.0422 -2.16771,-0.0299 -0.27313,-0.0276 -0.53861,-0.10996 -0.81132,-0.14113 -0.86188,-0.0444 -1.65801,-0.46135 -2.39429,-0.88368 4.55197,3.0426 1.99353,0.94361 0.92615,0.33054 -0.87747,-0.50397 -1.76382,-0.9924 -2.64573,-1.48859 -0.15184,-0.0758 -0.28736,-0.20487 -0.45559,-0.22747 -0.0547,-0.007 0.0513,0.16799 -0.004,0.16571 -0.17537,-0.007 -0.32835,-0.12419 -0.49261,-0.18611 -0.40359,-0.15213 -0.86979,-0.44611 -1.30574,-0.40968 -0.42431,-0.29212 -0.7982,-0.21566 -1.25852,-0.26821 -0.43849,-0.05 -0.87529,-0.17806 -1.29664,-0.30363 -0.73541,-0.23879 -1.47876,-0.37801 -2.2488,-0.44305 -0.78917,-0.21349 -1.51659,-0.57554 -2.34138,-0.62574 -0.78922,-0.16057 -1.58186,-0.32183 -2.37659,-0.48339 -0.38595,-0.003 -0.77626,-0.093 -1.16118,-0.094 -0.18767,0 -0.3624,0.12878 -0.54991,0.12081 -0.17581,-0.007 -0.34375,-0.0755 -0.51562,-0.11316 -0.10589,-0.0132 -0.59182,-0.11091 -0.73911,-0.0122 -0.0724,0.0485 -0.0494,0.36886 -0.19714,0.3814 -0.1896,0.0161 -0.37106,-0.0868 -0.55952,-0.11309 -0.15208,-0.0212 -0.30649,-0.0193 -0.45974,-0.0288 -0.45265,0.29424 -1.67518,-0.48003 -2.05142,-0.27239 -0.82799,0.45702 1.21939,0.28962 -0.39097,0.31549 -0.28043,
'commit'
2025-09-08 09:55:15 +08:00
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;
'commit'
2025-09-08 11:57:20 +08:00
console.log("svgPoint.x："+point.x)
console.log("svgPoint.y："+point.y)
'commit'
2025-09-08 08:42:57 +08:00
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
};
}
// 更新红旗位置
'commit'
2025-09-08 11:57:20 +08:00
function updateFlagPosition(percent) {
const point = getPointOnPath(percent);
flag.style.left = `${point.x}px`;
flag.style.top = `${point.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 08:39:40 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink