{"id":10,"date":"2026-01-22T22:11:29","date_gmt":"2026-01-22T14:11:29","guid":{"rendered":"https:\/\/www.iketose-anniversary.fan\/?page_id=10"},"modified":"2026-03-03T11:19:37","modified_gmt":"2026-03-03T03:19:37","slug":"iketose-anniversary","status":"publish","type":"page","link":"https:\/\/www.iketose-anniversary.fan\/","title":{"rendered":"iketose anniversary"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \u5c42\u7ea7\u5207\u6362+\u7ffb\u9875\uff08\u5e26\u52a8\u753b+\u80cc\u666f\u97f3\u4e50\uff09<\/title>\n <style>\n \/* \u5168\u5c40\u6837\u5f0f\u91cd\u7f6e & \u5b57\u4f53\u4f18\u5316 *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n \/* \u7f8e\u5316\u5b57\u4f53\uff1a\u4f18\u5148\u4f7f\u7528\u601d\u6e90\u5b8b\u4f53\/\u82f9\u65b9\uff0c\u515c\u5e95\u5fae\u8f6f\u96c5\u9ed1 *\/\n font-family: \"Source Han Serif SC\", \"PingFang SC\", \"Microsoft YaHei\", \"SimSun\", Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n \/* \u56fa\u5b9a\u80cc\u666f\u5c42 - \u9759\u6001\u80cc\u666f\u56fe *\/\n body {\n overflow: hidden;\n height: 100vh;\n position: relative;\n background: url('https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/background-b.webp') no-repeat center center fixed;\n background-size: cover;\n }\n \n \/* \u5185\u5bb9\u5c42\u5bb9\u5668 *\/\n .content-container {\n position: relative;\n width: 100%;\n height: 100vh;\n z-index: 2;\n }\n\n \/* \u6bcf\u4e00\u5c42\u5185\u5bb9\u7684\u901a\u7528\u6837\u5f0f - \u5e26\u52a8\u753b\u5c5e\u6027 *\/\n .content-layer {\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 0.6s ease-in-out,\n transform 0.6s ease-in-out;\n pointer-events: none;\n z-index: 2;\n background-color: transparent !important; \/* \u6240\u6709\u5c42\u9ed8\u8ba4\u900f\u660e\uff0c\u79fb\u9664\u9ed1\u5e95 *\/\n flex-direction: column; \/* \u65b0\u589e\uff1a\u8ba9\u6700\u540e\u4e00\u9875\u56fe\u7247+\u6587\u5b57\u7eb5\u5411\u6392\u5217 *\/\n }\n\n .content-layer.active {\n opacity: 1 !important;\n transform: scale(1);\n pointer-events: auto;\n z-index: 3;\n }\n\n .content-layer.leaving {\n opacity: 0;\n transform: scale(1.05);\n z-index: 2;\n }\n\n \/* \u6b22\u8fce\u9875\u56fe\u7247\u6837\u5f0f - \u975e\u5168\u5c4f\uff0c\u65e0\u9ed1\u5e95 + \u5706\u89d2 + 20px\u8fb9\u7f18\u67d4\u5316 *\/\n .welcome-img {\n max-width: 80%;\n max-height: 80%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 20px; \/* \u5706\u89d2\u6548\u679c\uff0c\u6570\u503c\u53ef\u6309\u9700\u8c03\u6574 *\/\n filter: blur(0px) drop-shadow(0 0 20px rgba(255,255,255,0.8)); \/* 20px\u8fb9\u7f18\u67d4\u5316\uff08\u767d\u8272\u67d4\u5149\uff09 *\/\n position: relative;\n z-index: 1;\n }\n\n \/* \u4e2d\u95f4\u9875\u9762\u56fe\u7247\u6837\u5f0f - \u975e\u5168\u5c4f\uff0c\u4fdd\u6301\u539f\u56fe\u6bd4\u4f8b\uff0c\u65e0\u9ed1\u5e95 + \u5706\u89d2 + 20px\u8fb9\u7f18\u67d4\u5316 | \u5b8c\u6210\u9875\u4fdd\u7559\u539f\u6709\u6837\u5f0f *\/\n .cos-img {\n max-width: 90%;\n max-height: 90%;\n width: auto;\n height: auto;\n object-fit: contain;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3); \/* \u8f7b\u5fae\u9634\u5f71\u589e\u5f3a\u89c6\u89c9\u6548\u679c *\/\n border-radius: 20px; \/* \u5706\u89d2\u6548\u679c\uff0c\u4e0e\u6b22\u8fce\u9875\u4e00\u81f4 *\/\n filter: blur(0px) drop-shadow(0 0 20px rgba(255,255,255,0.8)); \/* 20px\u8fb9\u7f18\u67d4\u5316\uff08\u767d\u8272\u67d4\u5149\uff09 *\/\n position: relative;\n z-index: 1;\n }\n \/* \u5b8c\u6210\u9875\u56fe\u7247\u4fdd\u7559\u539f\u6709\u6837\u5f0f\uff0c\u4e0d\u6dfb\u52a0\u67d4\u5316\u548c\u989d\u5916\u5706\u89d2 *\/\n .final-img {\n max-width: 90%;\n max-height: 80%; \/* \u51cf\u5c11\u9ad8\u5ea6\uff0c\u4e3a\u4e0b\u65b9\u6587\u5b57\u7559\u7a7a\u95f4 *\/\n width: auto;\n height: auto;\n object-fit: contain;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n margin-bottom: 30px; \/* \u4e0e\u4e0b\u65b9\u6587\u5b57\u95f4\u8ddd *\/\n }\n\n \/* \u6700\u540e\u4e00\u9875\u81f4\u8c22\u6587\u5b57\u6837\u5f0f - \u5c45\u4e2d\u4e0b\u65b9\u3001\u6392\u7248\u7f8e\u89c2 *\/\n .thanks-text {\n text-align: center;\n color: #fff;\n text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(255,255,255,0.5);\n line-height: 1.8;\n font-size: 24px;\n letter-spacing: 2px;\n padding: 0 20px;\n max-width: 800px;\n }\n\n \/* \u7ffb\u9875\u6309\u94ae\u6837\u5f0f - \u8c03\u6574\u4f4d\u7f6e\uff1a\u4e0a\u4e00\u9875\u5de6\u4e0a\u89d2\u3001\u4e0b\u4e00\u9875\u53f3\u4e0b\u89d2 *\/\n #prevBtn, #nextBtn {\n position: fixed;\n border: none;\n background-color: transparent;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n cursor: pointer;\n z-index: 9999;\n transition: all 0.3s ease;\n color: transparent;\n text-indent: -9999px;\n width: 150px;\n height: 90px;\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n }\n #prevBtn {\n top: 20px;\n left: 20px; \/* \u5de6\u4e0a\u89d2\uff1a\u5de6\u3001\u4e0a\u540420px *\/\n transform: none; \/* \u53d6\u6d88\u4e4b\u524d\u7684\u5c45\u4e2d\u504f\u79fb *\/\n }\n #nextBtn {\n top: 20px;\n right: 20px; \/* \u53f3\u4e0a\u89d2\uff1a\u53f3\u3001\u4e0a\u540420px *\/\n transform: none; \/* \u53d6\u6d88\u4e4b\u524d\u7684\u5c45\u4e2d\u504f\u79fb *\/\n }\n #prevBtn:hover {\n transform: scale(1.05); \/* \u4ec5\u7f29\u653e\uff0c\u65e0\u504f\u79fb *\/\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));\n }\n #nextBtn:hover {\n transform: scale(1.05); \/* \u4ec5\u7f29\u653e\uff0c\u65e0\u504f\u79fb *\/\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));\n }\n\n \/* \u7b54\u9898\u754c\u9762\u6837\u5f0f - 800*600\u56fa\u5b9a\u5c3a\u5bf8\u30014:3\u6bd4\u4f8b\u3001\u4e0d\u62c9\u4f38\u3001\u5e26\u5706\u89d2 *\/\n .quiz-container {\n width: 800px; \/* \u56fa\u5b9a\u5bbd\u5ea6800px *\/\n height: 600px; \/* \u56fa\u5b9a\u9ad8\u5ea6600px\uff084:3\u6bd4\u4f8b\uff09 *\/\n background-image: url('https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/questioncard-d.png');\n background-size: contain; \/* \u5b8c\u6574\u663e\u793a\u80cc\u666f\u56fe\uff0c\u4e0d\u62c9\u4f38 *\/\n background-position: center;\n background-repeat: no-repeat;\n background-color: transparent !important;\n box-shadow: none;\n padding: 60px 40px; \/* \u4f18\u5316\u5185\u8fb9\u8ddd\uff0c\u9002\u914d\u5de6\u534a\u533a\u6392\u7248 *\/\n border-radius: 10px; \/* \u5706\u89d2\u6548\u679c\uff0c\u6570\u503c\u53ef\u6309\u9700\u8c03\u6574 *\/\n z-index: 3;\n transform: scale(0.95);\n transition: transform 0.6s ease-in-out;\n border: none;\n position: relative;\n overflow: hidden; \/* \u9632\u6b62\u5185\u5bb9\u8d85\u51fa\u5706\u89d2\u8303\u56f4 *\/\n display: flex;\n flex-direction: column;\n align-items: flex-start; \/* \u6574\u4f53\u5185\u5bb9\u5de6\u5bf9\u9f50 *\/\n }\n\n .content-layer.active .quiz-container {\n transform: scale(1);\n }\n\n \/* \u7b54\u9898\u95ee\u9898\u6837\u5f0f - \u5de6\u534a\u533a\u5c55\u793a\u3001\u7f8e\u5316\u5b57\u4f53 *\/\n .quiz-question {\n font-size: 30px; \/* \u653e\u5927\u5b57\u4f53\u66f4\u9192\u76ee *\/\n margin-bottom: 40px;\n text-align: left; \/* \u5de6\u5bf9\u9f50 *\/\n color: #2D3748; \/* \u6df1\u7070\u8272\u66f4\u9ad8\u7ea7 *\/\n text-shadow: 0 2px 4px rgba(255,255,255,0.9);\n font-weight: 700; \/* \u52a0\u7c97 *\/\n letter-spacing: 1px; \/* \u5b57\u95f4\u8ddd\u66f4\u8212\u9002 *\/\n width: 50%; \/* \u9650\u5236\u5bbd\u5ea6\u5728\u5de6\u534a\u533a *\/\n line-height: 1.5; \/* \u884c\u9ad8\u4f18\u5316 *\/\n }\n\n \/* \u7b54\u9898\u9009\u9879\u5bb9\u5668 - \u5de6\u534a\u533a\u5c55\u793a *\/\n .quiz-options {\n display: flex;\n flex-direction: column;\n gap: 20px; \/* \u589e\u5927\u9009\u9879\u95f4\u8ddd *\/\n width: 45%; \/* \u9650\u5236\u5bbd\u5ea6\u5728\u5de6\u534a\u533a *\/\n }\n\n \/* \u7b54\u9898\u9009\u9879\u6837\u5f0f - \u7f8e\u5316\u3001\u5de6\u534a\u533a *\/\n .quiz-option {\n padding: 18px 25px; \/* \u589e\u5927\u5185\u8fb9\u8ddd *\/\n background-color: rgba(245, 240, 227, 0.9); \/* \u63d0\u9ad8\u4e0d\u900f\u660e\u5ea6 *\/\n border: 4px solid #F5E6C8;\n border-radius: 12px; \/* \u66f4\u5927\u5706\u89d2\u66f4\u7f8e\u89c2 *\/\n cursor: pointer;\n font-size: 20px; \/* \u653e\u5927\u5b57\u4f53 *\/\n color: #2D3748;\n transition: all 0.3s ease;\n text-shadow: 0 1px 3px rgba(255,255,255,0.8);\n pointer-events: auto;\n letter-spacing: 0.5px;\n line-height: 1.4;\n }\n\n .quiz-option:hover {\n background-color: rgba(245, 240, 227, 1);\n transform: translateX(10px); \/* hover\u504f\u79fb\u66f4\u5927 *\/\n border-color: #E8D4A2;\n box-shadow: 0 4px 12px rgba(0,0,0,0.1); \/* \u589e\u52a0hover\u9634\u5f71 *\/\n }\n\n .quiz-option.correct {\n background-color: rgba(144, 238, 144, 0.9);\n border-color: #8FBC8F;\n pointer-events: none;\n }\n\n .quiz-option.incorrect {\n background-color: rgba(255, 182, 193, 0.9);\n border-color: #CD5C5C;\n pointer-events: none;\n }\n\n #quizFeedback {\n display: none;\n }\n\n \/* \u5907\u6848\u4fe1\u606f\u6837\u5f0f - \u5e95\u90e8\u56fa\u5b9a\u663e\u793a\uff0c\u4e0d\u906e\u6321\u5185\u5bb9 *\/\n .beian-info {\n position: fixed;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 9999; \/* \u786e\u4fdd\u5728\u6700\u4e0a\u5c42\u663e\u793a *\/\n color: rgba(255, 255, 255, 0.8); \/* \u534a\u900f\u660e\u767d\u8272\uff0c\u9002\u914d\u6df1\u8272\u80cc\u666f *\/\n font-size: 12px;\n text-align: center;\n pointer-events: none; \/* \u9632\u6b62\u906e\u6321\u70b9\u51fb\u4e8b\u4ef6 *\/\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); \/* \u589e\u52a0\u6587\u5b57\u53ef\u8bfb\u6027 *\/\n }\n\n .beian-info a {\n color: rgba(255, 255, 255, 0.8);\n text-decoration: none; \/* \u53bb\u6389\u4e0b\u5212\u7ebf *\/\n }\n\n .beian-info a:hover {\n color: #ffffff; \/* \u9f20\u6807\u60ac\u6d6e\u65f6\u53d8\u7eaf\u767d *\/\n text-decoration: underline;\n }\n <\/style>\n<\/head>\n<body>\n <!-- \u5185\u5bb9\u5c42\u5bb9\u5668 -->\n <div class=\"content-container\" id=\"contentContainer\">\n <!-- 0 - \u6b22\u8fce\u9875 -->\n <div class=\"content-layer active\" data-index=\"0\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/welcome-blue.webp\" alt=\"\u6b22\u8fce\u754c\u9762\" class=\"welcome-img\">\n <\/div>\n\n <!-- 1 - \u7b2c\u4e00\u9875 -->\n <div class=\"content-layer\" data-index=\"1\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos1.webp\" alt=\"\u9875\u97621\" class=\"cos-img\">\n <\/div>\n\n <!-- 2 - \u7b2c\u4e8c\u9875 -->\n <div class=\"content-layer\" data-index=\"2\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos2.webp\" alt=\"\u9875\u97622\" class=\"cos-img\">\n <\/div>\n\n <!-- 3 - \u7b2c\u4e09\u9875 -->\n <div class=\"content-layer\" data-index=\"3\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos3.webp\" alt=\"\u9875\u97623\" class=\"cos-img\">\n <\/div>\n\n <!-- 4 - \u7b2c\u56db\u9875 -->\n <div class=\"content-layer\" data-index=\"4\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos4.webp\" alt=\"\u9875\u97624\" class=\"cos-img\">\n <\/div>\n\n <!-- 5 - \u7b2c\u4e94\u9875 -->\n <div class=\"content-layer\" data-index=\"5\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos5.webp\" alt=\"\u9875\u97625\" class=\"cos-img\">\n <\/div>\n\n <!-- 6 - \u7b2c\u516d\u9875 -->\n <div class=\"content-layer\" data-index=\"6\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos6c.webp\" alt=\"\u9875\u97626\" class=\"cos-img\">\n <\/div>\n\n <!-- 7 - \u7b2c\u4e03\u9875 -->\n <div class=\"content-layer\" data-index=\"7\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos7b.webp\" alt=\"\u9875\u97627\" class=\"cos-img\">\n <\/div>\n\n <!-- 8 - \u9009\u62e9\u9898\u9875\u9762 -->\n <div class=\"content-layer\" data-index=\"8\">\n <div class=\"quiz-container\" id=\"quizContainer\">\n <div class=\"quiz-question\" id=\"quizQuestion\">\u9009\u62e9\u98981<\/div>\n <div class=\"quiz-options\" id=\"quizOptions\">\n <div class=\"quiz-option\" data-correct=\"false\">\u9009\u9879A<\/div>\n <div class=\"quiz-option\" data-correct=\"true\">\u9009\u9879B\uff08\u6b63\u786e\uff09<\/div>\n <div class=\"quiz-option\" data-correct=\"false\">\u9009\u9879C<\/div>\n <\/div>\n <div class=\"quiz-feedback\" id=\"quizFeedback\"><\/div>\n <\/div>\n <\/div>\n\n <!-- 9 - \u7b54\u9898\u5b8c\u6210\u754c\u9762 - \u65b0\u589e\u81f4\u8c22\u6587\u5b57 -->\n <div class=\"content-layer\" data-index=\"9\">\n <img decoding=\"async\" src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/letter-b.webp\" alt=\"\u5b8c\u6210\u754c\u9762\" class=\"final-img\">\n <div class=\"thanks-text\">\n \u7279\u522b\u81f4\u8c22\uff1a\u79cb\u5929\u82b1\u5f00\u7684\u96e8\u5b63\uff0c\u8c22\u8c22\u4f60\u5c06\u90a3\u4e9b\u7247\u6bb5\u73cd\u85cf<br>\n \u9ed1\u6697\u4e0e\u591c\u665a\u4e4b\u5b50\uff08\u6b7b\u795e\uff09\uff0c\u8c22\u8c22\u4f60\u5e2e\u52a9\u8fd9\u573a\u821e\u4f1a\u5ef6\u7eed\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u7ffb\u9875\u6309\u94ae -->\n <button class=\"nav-btn\" id=\"prevBtn\" style=\"background-image: url('https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/lastpage2.png');\">\u4e0a\u4e00\u9875<\/button>\n <button class=\"nav-btn\" id=\"nextBtn\" style=\"background-image: url('https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/nextpage2.png');\">\u4e0b\u4e00\u9875<\/button>\n\n <!-- \u97f3\u9891\u5143\u7d20 - \u4ec5\u9884\u52a0\u8f7d\u7ffb\u9875\u97f3\u6548\u548c\u7b54\u9898\u6210\u529f\u97f3\u4e50\uff0cBGM\u5168\u90e8\u6539\u4e3a\u61d2\u52a0\u8f7d -->\n <audio id=\"nextPageAudio\" preload=\"auto\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/bubble.wav\" type=\"audio\/wav\">\n <\/audio>\n <audio id=\"finalSongAudio\" preload=\"auto\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/guanyu.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <!-- BGM\u97f3\u9891\u6539\u4e3apreload=\"none\"\uff0c\u907f\u514d\u521d\u59cb\u52a0\u8f7d -->\n <audio id=\"bgm1\" preload=\"none\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/bgm1.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <audio id=\"bgm2\" preload=\"none\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/bgm2.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <audio id=\"bgm3\" preload=\"none\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/bgm3.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <audio id=\"bgm4\" preload=\"none\">\n <source src=\"https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/bgm4.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n\n <script>\n \/\/ \u6838\u5fc3\u53d8\u91cf\u5b9a\u4e49\n const layers = document.querySelectorAll('.content-layer');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n let currentLayerIndex = 0;\n let currentQuizIndex = 0;\n let isQuizCompleted = false;\n let isAnimating = false;\n let isBgmPlaying = false;\n let currentBgmIndex = 0;\n let isFirstPageLoaded = false; \/\/ \u6807\u8bb0\u7b2c\u4e00\u9875\u662f\u5426\u5df2\u52a0\u8f7d\u5269\u4f59BGM\n\n \/\/ \u83b7\u53d6\u97f3\u9891\u5143\u7d20\n const nextPageAudio = document.getElementById('nextPageAudio');\n const finalSongAudio = document.getElementById('finalSongAudio');\n const bgm1 = document.getElementById('bgm1');\n const bgm2 = document.getElementById('bgm2');\n const bgm3 = document.getElementById('bgm3');\n const bgm4 = document.getElementById('bgm4');\n const bgmList = [bgm1, bgm2, bgm3, bgm4];\n\n \/\/ \u9884\u52a0\u8f7d\u56fe\u7247\u5217\u8868\uff08\u786e\u4fdd\u52a0\u8f7d\u987a\u5e8f\uff1a\u80cc\u666f\u56fe \u2192 \u5176\u4ed6\u56fe\u7247\uff09\n const preloadImages = () => {\n return new Promise((resolve) => {\n \/\/ 1. \u5148\u52a0\u8f7d\u9875\u9762\u80cc\u666f\u56fe\n const bgImage = new Image();\n bgImage.src = 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/background-b.webp';\n bgImage.onload = () => {\n \/\/ 2. \u518d\u52a0\u8f7d\u6240\u6709\u5185\u5bb9\u56fe\u7247\n const contentImages = [\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/welcome-blue.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos1.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos2.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos3.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos4.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos5.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos6c.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/cos7b.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/questioncard-d.png',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/letter-b.webp',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/lastpage2.png',\n 'https:\/\/www.iketose-anniversary.fan\/wp-content\/uploads\/2026\/01\/nextpage2.png'\n ];\n\n let loadedCount = 0;\n contentImages.forEach(src => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n loadedCount++;\n if (loadedCount === contentImages.length) {\n resolve(); \/\/ \u6240\u6709\u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\n }\n };\n img.onerror = () => {\n loadedCount++;\n if (loadedCount === contentImages.length) {\n resolve();\n }\n };\n });\n };\n bgImage.onerror = resolve;\n });\n };\n\n \/\/ \u9875\u9762\u52a0\u8f7d\u521d\u59cb\u5316 - \u5148\u52a0\u8f7d\u56fe\u7247\uff0c\u518d\u521d\u59cb\u5316\u57fa\u7840\u529f\u80fd\n window.addEventListener('load', async () => {\n \/\/ 1. \u4f18\u5148\u9884\u52a0\u8f7d\u6240\u6709\u56fe\u7247\n await preloadImages();\n \n \/\/ 2. \u4ec5\u9884\u52a0\u8f7d\u7ffb\u9875\u97f3\u6548\u548c\u7b54\u9898\u6210\u529f\u97f3\u4e50\n nextPageAudio.load();\n finalSongAudio.load();\n \n \/\/ 3. \u521d\u59cb\u5316\u6309\u94ae\u663e\u793a\n updateButtonVisibility();\n \n \/\/ 4. \u7ed1\u5b9a\u9996\u6b21\u70b9\u51fb\u4e8b\u4ef6\uff08\u70b9\u51fb\u540e\u52a0\u8f7d\u7b2c\u4e00\u9996BGM\uff09\n document.body.addEventListener('click', initBgmOnFirstClick, { once: true });\n });\n\n \/\/ \u9996\u6b21\u4ea4\u4e92\u521d\u59cb\u5316 - \u4ec5\u52a0\u8f7d\u5e76\u64ad\u653e\u7b2c\u4e00\u9996BGM\n function initBgmOnFirstClick() {\n if (!isBgmPlaying) {\n \/\/ \u52a0\u8f7d\u5e76\u64ad\u653e\u7b2c\u4e00\u9996BGM\n bgm1.load();\n bgm1.onloadeddata = () => {\n playBgm(0);\n isBgmPlaying = true;\n };\n bgm1.onerror = () => {\n console.log(\"BGM1\u52a0\u8f7d\u5931\u8d25\");\n isBgmPlaying = false;\n };\n }\n }\n\n \/\/ \u52a0\u8f7d\u5269\u4f59BGM\uff08\u4ec5\u5728\u8fdb\u5165\u7b2c\u4e00\u9875\u65f6\u6267\u884c\u4e00\u6b21\uff09\n function loadRemainingBgm() {\n if (isFirstPageLoaded) return;\n \n \/\/ \u52a0\u8f7dbgm2\u3001bgm3\u3001bgm4\n bgm2.load();\n bgm3.load();\n bgm4.load();\n \n \/\/ \u76d1\u542c\u52a0\u8f7d\u72b6\u6001\uff08\u53ef\u9009\uff0c\u7528\u4e8e\u8c03\u8bd5\uff09\n bgm2.onloadeddata = () => console.log(\"BGM2\u52a0\u8f7d\u5b8c\u6210\");\n bgm3.onloadeddata = () => console.log(\"BGM3\u52a0\u8f7d\u5b8c\u6210\");\n bgm4.onloadeddata = () => console.log(\"BGM4\u52a0\u8f7d\u5b8c\u6210\");\n \n isFirstPageLoaded = true;\n }\n\n \/\/ \u64ad\u653e\u80cc\u666f\u97f3\u4e50\n function playBgm(index) {\n bgmList.forEach((bgm, i) => {\n if (i !== index) {\n bgm.pause();\n bgm.currentTime = 0;\n }\n });\n const currentBgm = bgmList[index];\n currentBgm.currentTime = 0;\n currentBgm.play().catch(error => {\n console.log(\"\u80cc\u666f\u97f3\u4e50\u64ad\u653e\u5931\u8d25:\", error);\n });\n currentBgm.onended = () => {\n if (isBgmPlaying) {\n currentBgmIndex = (currentBgmIndex + 1) % bgmList.length;\n playBgm(currentBgmIndex);\n }\n };\n }\n\n \/\/ \u6682\u505c\u6240\u6709\u80cc\u666f\u97f3\u4e50\n function pauseAllBgm() {\n bgmList.forEach(bgm => bgm.pause());\n }\n\n \/\/ \u9009\u62e9\u9898\u6570\u636e\n const quizData = [\n {\n question: \"\u6c60\u5e74\u7684\u76f4\u64ad\u95f4\u662f\uff1f\",\n options: [\n { text: \"907449\", correct: false },\n { text: \"918717\", correct: true },\n { text: \"22770386\", correct: false }\n ]\n },\n {\n question: \"1 kilometer=\",\n options: [\n { text: \"10000 cm\", correct: false },\n { text: \"10000 m\", correct: false },\n { text: \"10000 dm\", correct: true }\n ]\n },\n {\n question: \"5*8=\",\n options: [\n { text: \"40\", correct: true },\n { text: \"30\", correct: false },\n { text: \"36\", correct: false }\n ]\n },\n {\n question: \"\u6c60\u5e74\u662f\u4ee5\u4e0b\u54ea\u4e2a\u751f\u7269\u7684\u5316\u5f62\",\n options: [\n { text: \"\u8783\u87f9\", correct: false },\n { text: \"\u30af\u30b8\u30e9\", correct: true },\n { text: \"Crab\", correct: false }\n ]\n },\n {\n question: \"2022.8.18\u53d1\u751f\u4e86\u4ec0\u4e48\",\n options: [\n { text: \"\u6c60\u5e74\u610f\u8bc6\u5230\u5176\u5b9e\u81ea\u5df1\u662f\u8783\u87f9\", correct: false },\n { text: \"\u6c60\u5e74\u53d1\u73b0\u539f\u6765\u897f\u74dc\u5b50\u53ef\u4ee5\u5403\", correct: false },\n { text: \"\u6c60\u5e74\u6536\u5230\u4e86\u6770\u5a01\u5c14\u97f3\u4e50\u8bc4\u8bba\", correct: true }\n ]\n }\n ];\n\n \/\/ \u66f4\u65b0\u6fc0\u6d3b\u5c42\n function updateActiveLayer() {\n if (isAnimating) return;\n isAnimating = true;\n\n const currentLayer = layers[currentLayerIndex];\n currentLayer.classList.add('leaving');\n\n setTimeout(() => {\n layers.forEach((layer, index) => {\n if (index === currentLayerIndex) {\n layer.classList.add('active');\n \/\/ \u8fdb\u5165\u7b2c\u4e00\u9875\u65f6\u52a0\u8f7d\u5269\u4f59BGM\n if (index === 1) {\n loadRemainingBgm();\n }\n } else {\n layer.classList.remove('active', 'leaving');\n }\n });\n\n setTimeout(() => {\n currentLayer.classList.remove('leaving');\n isAnimating = false;\n updateButtonVisibility();\n if (currentLayerIndex === 8 && !isQuizCompleted) {\n renderQuizQuestion(currentQuizIndex);\n }\n }, 600);\n }, 50);\n }\n\n \/\/ \u66f4\u65b0\u6309\u94ae\u663e\u793a\u72b6\u6001\n function updateButtonVisibility() {\n if (isAnimating) return;\n\n if (currentLayerIndex === 0) {\n prevBtn.style.display = 'none';\n nextBtn.style.display = 'none';\n } else if (currentLayerIndex === layers.length - 1) {\n prevBtn.style.display = 'block';\n nextBtn.style.display = 'none';\n } else if (currentLayerIndex === 8 && !isQuizCompleted) {\n prevBtn.style.display = 'block';\n nextBtn.style.display = 'none';\n } else {\n prevBtn.style.display = 'block';\n nextBtn.style.display = 'block';\n }\n }\n\n \/\/ \u6e32\u67d3\u9009\u62e9\u9898\n function renderQuizQuestion(quizIndex) {\n const quizQuestion = document.getElementById('quizQuestion');\n const quizOptions = document.getElementById('quizOptions');\n \n quizOptions.innerHTML = '';\n quizQuestion.textContent = quizData[quizIndex].question;\n \n quizData[quizIndex].options.forEach(option => {\n const optionElement = document.createElement('div');\n optionElement.className = 'quiz-option';\n optionElement.textContent = option.text;\n optionElement.dataset.correct = option.correct;\n optionElement.addEventListener('click', () => {\n checkQuizAnswer(optionElement);\n });\n quizOptions.appendChild(optionElement);\n });\n }\n\n \/\/ \u68c0\u67e5\u7b54\u9898\u7b54\u6848\n function checkQuizAnswer(optionElement) {\n const isCorrect = optionElement.dataset.correct === 'true';\n \n if (isCorrect) {\n optionElement.classList.add('correct');\n setTimeout(() => {\n currentQuizIndex++;\n if (currentQuizIndex < quizData.length) {\n renderQuizQuestion(currentQuizIndex);\n } else {\n isQuizCompleted = true;\n updateButtonVisibility();\n playFinalSongWithBgmControl();\n }\n }, 1000);\n } else {\n optionElement.classList.add('incorrect');\n setTimeout(() => {\n optionElement.classList.remove('incorrect');\n }, 1000);\n }\n }\n\n \/\/ \u64ad\u653e\u7ffb\u9875\u97f3\u6548\n function playNextPageAudio() {\n try {\n nextPageAudio.currentTime = 0;\n nextPageAudio.play().catch(error => {\n console.log(\"\u5207\u6362\u9875\u97f3\u6548\u64ad\u653e\u5931\u8d25:\", error);\n nextPageAudio.play();\n });\n } catch (e) {\n console.log(\"\u97f3\u6548\u64ad\u653e\u5f02\u5e38:\", e);\n }\n }\n\n \/\/ \u64ad\u653e\u7b54\u9898\u6210\u529f\u97f3\u6548\n function playFinalSongWithBgmControl() {\n pauseAllBgm();\n try {\n finalSongAudio.currentTime = 0;\n finalSongAudio.play().then(() => {\n finalSongAudio.onended = () => {\n if (isBgmPlaying) {\n currentBgmIndex = 0;\n playBgm(currentBgmIndex);\n }\n };\n }).catch(error => {\n console.log(\"\u7b54\u9898\u6210\u529f\u97f3\u4e50\u64ad\u653e\u5931\u8d25:\", error);\n finalSongAudio.play();\n if (isBgmPlaying) {\n currentBgmIndex = 0;\n playBgm(currentBgmIndex);\n }\n });\n } catch (e) {\n console.log(\"\u97f3\u4e50\u64ad\u653e\u5f02\u5e38:\", e);\n if (isBgmPlaying) {\n currentBgmIndex = 0;\n playBgm(currentBgmIndex);\n }\n }\n }\n\n \/\/ \u7ffb\u9875\u6309\u94ae\u4e8b\u4ef6\n nextBtn.addEventListener('click', () => {\n if (currentLayerIndex < layers.length - 1 && !isAnimating) {\n playNextPageAudio();\n currentLayerIndex++;\n updateActiveLayer();\n }\n });\n\n prevBtn.addEventListener('click', () => {\n if (currentLayerIndex > 0 && !isAnimating) {\n playNextPageAudio();\n currentLayerIndex--;\n if (currentLayerIndex === 8) {\n isQuizCompleted = false;\n currentQuizIndex = 0;\n }\n updateActiveLayer();\n }\n });\n\n \/\/ \u901a\u7528\u70b9\u51fb\u7ffb\u9875\u51fd\u6570\n function handleClickToNextPage(e) {\n \/\/ \u6392\u9664\u6309\u94ae\u548c\u7b54\u9898\u9009\u9879\u7684\u70b9\u51fb\n if (e.target === prevBtn || e.target === nextBtn || e.target.classList.contains('quiz-option')) {\n return;\n }\n \n if (!isAnimating) {\n \/\/ \u6b22\u8fce\u9875 (0)\n if (currentLayerIndex === 0) {\n playNextPageAudio();\n currentLayerIndex++;\n updateActiveLayer();\n }\n \/\/ 1-7\u9875 \u6216 \u7b54\u9898\u5b8c\u6210\u9875(9)\n else if ((currentLayerIndex >= 1 && currentLayerIndex <= 7) || currentLayerIndex === 9) {\n playNextPageAudio();\n currentLayerIndex++;\n updateActiveLayer();\n }\n }\n }\n\n \/\/ \u7ed1\u5b9a\u70b9\u51fb\u7ffb\u9875\u4e8b\u4ef6\n document.addEventListener('click', handleClickToNextPage);\n\n \/\/ \u521d\u59cb\u5316\u9875\u9762\n updateButtonVisibility();\n <\/script>\n\n <!-- \u5907\u6848\u4fe1\u606f -->\n<div class=\"beian-info\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u82cfICP\u59072025214309\u53f7-2<\/a>\n <span> | <\/span>\n <a href=\"http:\/\/www.beian.gov.cn\/portal\/registerSystemInfo?recordcode=32010602012304\" target=\"_blank\">\u82cf\u516c\u7f51\u5b89\u590732010602012304\u53f7<\/a>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5c42\u7ea7\u5207\u6362+\u7ffb\u9875\uff08\u5e26\u52a8\u753b+\u80cc\u666f\u97f3\u4e50\uff09 \u9009\u62e9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":112,"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/www.iketose-anniversary.fan\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}