'commit'

2025-09-08 08:39:40 +08:00
parent fbdd6d11bf
commit b982c63873
4 changed files with 148 additions and 0 deletions
--- a/dsLightRag/ChangZheng/1.html
+++ b/dsLightRag/ChangZheng/1.html
@@ -0,0 +1,147 @@
+<!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;
+      width: 90%;
+      max-width: 1200px;
+      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;
+      offset-path: path('M100,350 C150,340 200,320 250,300 300,280 350,260 400,240 450,220 500,200 550,180 600,160 650,140 700,100');
+      offset-distance: 0%;
+      animation: move 20s linear paused;
+    }
+
+    @keyframes move {
+      to {
+        offset-distance: 100%;
+      }
+    }
+
+    #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">
+    <svg viewBox="0 0 900 500">
+      <!-- 路线 -->
+      <path id="route"
+        d="M100,350 C150,340 200,320 250,300 300,280 350,260 400,240 450,220 500,200 550,180 600,160 650,140 700,100"
+        stroke="red" stroke-width="2" fill="none" stroke-dasharray="4,4" />
+    </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");
+
+    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月 到达吴起镇" }
+    ];
+
+    let interval;
+
+    function play() {
+      flag.style.animationPlayState = "running";
+      interval = setInterval(updateSubtitle, 200);
+    }
+
+    function pause() {
+      flag.style.animationPlayState = "paused";
+      clearInterval(interval);
+    }
+
+    function reset() {
+      flag.style.animation = "none";
+      flag.offsetHeight; // 触发重排
+      flag.style.animation = "move 20s linear paused";
+      subtitle.textContent = timeline[0].text;
+      clearInterval(interval);
+    }
+
+    function updateSubtitle() {
+      const computed = window.getComputedStyle(flag);
+      const distance = computed.offsetDistance;
+      const percent = parseFloat(distance);
+      for (let i = timeline.length - 1; i >= 0; i--) {
+        if (percent >= timeline[i].p) {
+          subtitle.textContent = timeline[i].text;
+          break;
+        }
+      }
+    }
+  </script>
+
+</body>
+</html>
--- a/dsLightRag/ChangZheng/background.jpeg
+++ b/dsLightRag/ChangZheng/background.jpeg
--- a/dsLightRag/ChangZheng/hongqi.jpg
+++ b/dsLightRag/ChangZheng/hongqi.jpg
--- a/dsLightRag/ChangZheng/文档.txt
+++ b/dsLightRag/ChangZheng/文档.txt
@@ -0,0 +1 @@
+https://yqnn.github.io/svg-path-editor/