论坛首页 › 特效动画 › 也曾年轻《古诗词里的端午节》

醉美水芙蓉 发表于 2026-6-18 21:45:33

也曾年轻《古诗词里的端午节》

<style>
#oBlk        {
        width:600px;min-height:1000px;
        position:relative;margin-left:50%;transform:translate(-50%);
        overflow:hidden;border-radius:24px;
        background-color:hsl(60, 15%, 90%);box-shadow:4px 4px 10px black;
       
        #showSVG        {width:600px;}
        #container        {
                width:100%;min-height:400px;text-align:center;
                margin:auto;overflow:hidden;
                border-top-left-radius:24px;border-top-right-radius:24px;
                font-size:24px;
                position:absolute;left:0px;bottom:64px;
                span       {
                        display:block;margin-bottom:6px;
                        &:nth-of-type(1)        {font-size:1.25em;color:brown;font-family:隶书,仿宋,微软雅黑;}
                        &:nth-of-type(2)        {font-size:0.8em;color: darkred;}
                }
        }
}
   .tSty   {
      font-weight:bold;
      color:white;
      text-shadow:
            1px 1px darkblue,
            -1px 1px darkblue,
            -1px -1px darkblue,
            1px -1px darkblue;
    }

@keyframes rot {to {transform:rotate(1turn)}}
</style>
<div id="oBlk">
        <div id="showSVG"></div>
        <div id="container"></div>
        <!-- p id="descTxt"></p -->
</div>
<script>
const        pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Ms8zxhheTiabWoBpJmmKjGeKicibvXdSWna7BPDVvAkzv6PQEzUSgxuc8RZcvW5ht9O6RUwWj0stpgypMibZMwfNLlvOGUfLP3eFU/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14NzicIMb2ZLNphtlVBM4DxG7jwUGzsYa2Xgu8xk9iaqR31XwcL4sEKd7zRicLrgH9y4loc0MSecJtg5UMPnesb2UwgAM67xiaCGYds/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14PSicQkELtzQjnURBic5ZN8xnq52Gphuic23ehiasia6JukC0KWCZPQicibpu6ob3O7ic3oic6z3vA7QJ2XINS04LpqlOiawiciaL7jsEramII/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14MdAxdMPMvBzmGeNCFIcSNqFVH3uBd6NzuclbcffCt9kCE9yGYEMbIY3c4arMQEITOlvCbhreibqOvficeuPIODfRyflLGL6CEhY/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Pjp97hvfJAvo5GHCgVDcgX45rM4JWicetMPSBNJ450e4235RUSgGYTNxkuzcB2rsOZZCVzNSIibQLyrMG7mKfu9sClBv4kjnCIs/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14NYb9IyL8uR90KXqd7pO8LaqWMmNtlYZKTF6HBY8J4HpmvIGRY9MPuJQMbkJN1ft6uch72D5BtwiauyFiayUIRWOEMmTaCMicZaKk/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14NlngDia0QxMKb8ibblA8UdPa8BFasYiao6fvZJJzxtaiawAicyXEHMwhF2ESNA2O2zbMx6Dph0iahRWh1stv6HzuIBI6J7YH9ETKK1Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14ObYN6tHUgKrfCxxicic77VF1JEgq6xYicV2OkEiaCeposBOHzEjDjZsXSoIq6CksoaxShRhNSUXiaM2Nkr1ua75AaUIRhgcwd17Mew/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14PANS86lXlDsO38ruMXJ84ywbkUiaQaKBKNwiaS2rAsDumJG0LcZUQS8vRgDk70PJQLHOO7Oc1XHnS5s9tkqLibz2pH6N7OYlK4jg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14OazKJJO4FNmHPibN8MnE6YyAZo9Mg9YibKSZ9mK6etulxWSMbicyuyialV4cZsPovKGjySXnibjSvy22nBIOMmVicibKib6n26qEMnAEk/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14N8R2xE7QfJ0IVx9phLFibxia5NzibCqia7hia38uEsyFiaxHiaBQiabicN1dHLEd88JFKEjh88SrpyrAR6wdedTaumYgsyyUEmAfUJ1hr0/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14M5jAUkYcRDRAURLib2bibayVWGHOpj4t0JZkgawibl6Q8b6EKUgla99gDFibZM2hojbhFs5j7hVVLtywe9tbb7Hdzfibgy7cjUqS6E/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14MjDia3pAA2VJ8PfKYj2ggYLhSibc71pI2YXVBgr4icdg32dKEYUQOMOlPz2IZv4IYNpv2kWYwXFD8jQSuasCqf8Jjl3LSVzoTO38/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Oa3eucr4Mty75hyGsAUDCaU7bZ6rxsClsM7HHhqgYfkPlEgnKLT3NswbjmUn7DFaiaBx66lJhzibl7P5uTrpq2rY5azlWunrhWY/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54FfL9TTHhylOJzicZIRWmkxuGPm7DjKBfstR4w6MEAucggicbnVdLIL83qkuCmHGBzSZicJsWLMtUbRNhc9v8dl2tZvcicFlXBsuN4/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54HGKHY1V6yuA6k5eksDXBqm2d24XLDdIEDibnb0bkbvXkUgAwavUug42nhibEu3cDrKWrP1yibDO1nmHmk8ZiaiartnMZrNwa7XVEaI/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EcGaKyibI4mclCibnoa7f9iaoPP6uTgDibyk0xHN540ZBfcl2IzvY2mHD730soILPH0JAiaqF7xfp2Mxjicve3G86DoLsrol7SUoecQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54Ho0lea3J0hbCtiaicbBCRGfvZc5PaDrcLcsrabYF4u8ZdYp7waL1TMLDr2A1JicB78W5B5OLW9I8fV6lHXqFv7AUzfTj2tlnqeic4/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54GRn9BF5HFl9LQvCVTMSxez8icFaTKde0MJnba1RiaMyicESH2YqZ80eeePakFIsPfh6Q7w6bwiaGDCoV8gs1Hx6vkVJMdvdMz83dI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54HtK6yRwTdvwWWE2AUHaWwJr4ibzOBeVIVibZialdJoywCjOGByicTPrjpDHoahO3UGpAMQlWH9ydLdGII7vL9hlruCVXsMNicVTgYg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54ESHnibMU0OmB6wyrxUV40icbo2Hu4RXv3YWZlyjcCUDiaDfTdql44yPeNNGW9Fr0uUZ2ajRibUhxThdUG2UIUJgZ6iamtJYFlYbiaBE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HwIsnu8DOq4Yoyz5E36ibRqd2ZOxhW8P54YppnktrPFibgLdHib8JNxbqd4WRkGGnndOq6p2RqibibOjibickMibtWqvicDibhjvJ5icF5fE/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54EIWUZfzh5m0faLFH36OoUdDKauVKeudNBicgAtz9djibO13pzIE6bQ1fzPV4EEgRPJyiajjvCQbBDXjkezjiaWokH1e7dhaJWfIRc/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HLMmicf0Fiaet9KianfnhocHBLzqfib61wGg0bocXFnXYwLSEetvlyKBGnWNujhjW73dC22HSiaw2XlyqYRJiaLfXjtTeMRTeQyFiclo/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54FUEe1WkKU6oKx9FUsN3cVOKV6gAzZicxqRGpbZL1hcUtvj7bgBvyCNfXvdQ7gZibWicMWDEBONcatfKbkyuK3oKEQXAhPR5syQXU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EL8mNKUVveC8ABHicHv0EOCDZwfrUibNOfzDiaadTDic1f6edRnvpHMIzTwic4O4tCrLADHtjAzCO3iauQYAIzfpiczcia14NMAowq7HM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EgIys8G43teuELEHuLF4Kj4YyIeeeIT8OskFm0zuWTeCRHvZYSiatHdWYE98sCibwvzj83qDAbdrBOvol1OHaKDcGbWG84HNYX8/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HiaDHObQN27mvlMBv5iamD2fTzunBMvSaZK9gJp9m3PffLYkfiaGgcbb5tHRnCfuicibVZDwMwJXR7mOFyxjCtDNkibXTeDnbsedPfI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54GZ46dK2yIO1vDUrf8lsyibEFToBEXOnfnAWZOkAORjaxmjvb2FAKNmuXWAsibeB05ibibjpf0gw3mlXWaH41eR2Y7Zg7ybicBeZSpE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54FwGZygtN3WfdpmfRmdv7WWTPmZf5mJfhmNdo0tJOvXhqTju5AtPrzPQzGPBjicl0ZpBJ0icbqoy4KQUjTKibXMDmhCrfm5xuPnQs/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/aWp9KHZuqcStASlia9ef9DZAfxoHlZbKEEY9XXwKMs0X3tRA7AiaZ8XxFT0nFxVWQBiachLB79cBfDvj978Ffc8UdSnJ6Nbd2Hwnatmkb4qoGs/640",
//----------------------------------------------------------------------------------------------------------------------------------
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Ms8zxhheTiabWoBpJmmKjGeKicibvXdSWna7BPDVvAkzv6PQEzUSgxuc8RZcvW5ht9O6RUwWj0stpgypMibZMwfNLlvOGUfLP3eFU/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14NzicIMb2ZLNphtlVBM4DxG7jwUGzsYa2Xgu8xk9iaqR31XwcL4sEKd7zRicLrgH9y4loc0MSecJtg5UMPnesb2UwgAM67xiaCGYds/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14PSicQkELtzQjnURBic5ZN8xnq52Gphuic23ehiasia6JukC0KWCZPQicibpu6ob3O7ic3oic6z3vA7QJ2XINS04LpqlOiawiciaL7jsEramII/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14MdAxdMPMvBzmGeNCFIcSNqFVH3uBd6NzuclbcffCt9kCE9yGYEMbIY3c4arMQEITOlvCbhreibqOvficeuPIODfRyflLGL6CEhY/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Pjp97hvfJAvo5GHCgVDcgX45rM4JWicetMPSBNJ450e4235RUSgGYTNxkuzcB2rsOZZCVzNSIibQLyrMG7mKfu9sClBv4kjnCIs/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14NYb9IyL8uR90KXqd7pO8LaqWMmNtlYZKTF6HBY8J4HpmvIGRY9MPuJQMbkJN1ft6uch72D5BtwiauyFiayUIRWOEMmTaCMicZaKk/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14NlngDia0QxMKb8ibblA8UdPa8BFasYiao6fvZJJzxtaiawAicyXEHMwhF2ESNA2O2zbMx6Dph0iahRWh1stv6HzuIBI6J7YH9ETKK1Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14ObYN6tHUgKrfCxxicic77VF1JEgq6xYicV2OkEiaCeposBOHzEjDjZsXSoIq6CksoaxShRhNSUXiaM2Nkr1ua75AaUIRhgcwd17Mew/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14PANS86lXlDsO38ruMXJ84ywbkUiaQaKBKNwiaS2rAsDumJG0LcZUQS8vRgDk70PJQLHOO7Oc1XHnS5s9tkqLibz2pH6N7OYlK4jg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14OazKJJO4FNmHPibN8MnE6YyAZo9Mg9YibKSZ9mK6etulxWSMbicyuyialV4cZsPovKGjySXnibjSvy22nBIOMmVicibKib6n26qEMnAEk/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14N8R2xE7QfJ0IVx9phLFibxia5NzibCqia7hia38uEsyFiaxHiaBQiabicN1dHLEd88JFKEjh88SrpyrAR6wdedTaumYgsyyUEmAfUJ1hr0/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14M5jAUkYcRDRAURLib2bibayVWGHOpj4t0JZkgawibl6Q8b6EKUgla99gDFibZM2hojbhFs5j7hVVLtywe9tbb7Hdzfibgy7cjUqS6E/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/PWLfoV6c14MjDia3pAA2VJ8PfKYj2ggYLhSibc71pI2YXVBgr4icdg32dKEYUQOMOlPz2IZv4IYNpv2kWYwXFD8jQSuasCqf8Jjl3LSVzoTO38/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/PWLfoV6c14Oa3eucr4Mty75hyGsAUDCaU7bZ6rxsClsM7HHhqgYfkPlEgnKLT3NswbjmUn7DFaiaBx66lJhzibl7P5uTrpq2rY5azlWunrhWY/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54FfL9TTHhylOJzicZIRWmkxuGPm7DjKBfstR4w6MEAucggicbnVdLIL83qkuCmHGBzSZicJsWLMtUbRNhc9v8dl2tZvcicFlXBsuN4/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54HGKHY1V6yuA6k5eksDXBqm2d24XLDdIEDibnb0bkbvXkUgAwavUug42nhibEu3cDrKWrP1yibDO1nmHmk8ZiaiartnMZrNwa7XVEaI/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EcGaKyibI4mclCibnoa7f9iaoPP6uTgDibyk0xHN540ZBfcl2IzvY2mHD730soILPH0JAiaqF7xfp2Mxjicve3G86DoLsrol7SUoecQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54Ho0lea3J0hbCtiaicbBCRGfvZc5PaDrcLcsrabYF4u8ZdYp7waL1TMLDr2A1JicB78W5B5OLW9I8fV6lHXqFv7AUzfTj2tlnqeic4/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54GRn9BF5HFl9LQvCVTMSxez8icFaTKde0MJnba1RiaMyicESH2YqZ80eeePakFIsPfh6Q7w6bwiaGDCoV8gs1Hx6vkVJMdvdMz83dI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54HtK6yRwTdvwWWE2AUHaWwJr4ibzOBeVIVibZialdJoywCjOGByicTPrjpDHoahO3UGpAMQlWH9ydLdGII7vL9hlruCVXsMNicVTgYg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54ESHnibMU0OmB6wyrxUV40icbo2Hu4RXv3YWZlyjcCUDiaDfTdql44yPeNNGW9Fr0uUZ2ajRibUhxThdUG2UIUJgZ6iamtJYFlYbiaBE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HwIsnu8DOq4Yoyz5E36ibRqd2ZOxhW8P54YppnktrPFibgLdHib8JNxbqd4WRkGGnndOq6p2RqibibOjibickMibtWqvicDibhjvJ5icF5fE/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54EIWUZfzh5m0faLFH36OoUdDKauVKeudNBicgAtz9djibO13pzIE6bQ1fzPV4EEgRPJyiajjvCQbBDXjkezjiaWokH1e7dhaJWfIRc/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HLMmicf0Fiaet9KianfnhocHBLzqfib61wGg0bocXFnXYwLSEetvlyKBGnWNujhjW73dC22HSiaw2XlyqYRJiaLfXjtTeMRTeQyFiclo/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54FUEe1WkKU6oKx9FUsN3cVOKV6gAzZicxqRGpbZL1hcUtvj7bgBvyCNfXvdQ7gZibWicMWDEBONcatfKbkyuK3oKEQXAhPR5syQXU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EL8mNKUVveC8ABHicHv0EOCDZwfrUibNOfzDiaadTDic1f6edRnvpHMIzTwic4O4tCrLADHtjAzCO3iauQYAIzfpiczcia14NMAowq7HM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54EgIys8G43teuELEHuLF4Kj4YyIeeeIT8OskFm0zuWTeCRHvZYSiatHdWYE98sCibwvzj83qDAbdrBOvol1OHaKDcGbWG84HNYX8/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54HiaDHObQN27mvlMBv5iamD2fTzunBMvSaZK9gJp9m3PffLYkfiaGgcbb5tHRnCfuicibVZDwMwJXR7mOFyxjCtDNkibXTeDnbsedPfI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/Pheac8iba54GZ46dK2yIO1vDUrf8lsyibEFToBEXOnfnAWZOkAORjaxmjvb2FAKNmuXWAsibeB05ibibjpf0gw3mlXWaH41eR2Y7Zg7ybicBeZSpE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Pheac8iba54FwGZygtN3WfdpmfRmdv7WWTPmZf5mJfhmNdo0tJOvXhqTju5AtPrzPQzGPBjicl0ZpBJ0icbqoy4KQUjTKibXMDmhCrfm5xuPnQs/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/aWp9KHZuqcStASlia9ef9DZAfxoHlZbKEEY9XXwKMs0X3tRA7AiaZ8XxFT0nFxVWQBiachLB79cBfDvj978Ffc8UdSnJ6Nbd2Hwnatmkb4qoGs/640",
];
//        端午节12首经典古诗词
const tab = `&emsp;&emsp;`;
const poems = [
[`《浣溪沙·端午》`,
`宋·苏轼`,
`轻汗微微透碧纨，`,`明朝端午浴芳兰。`,`流香涨腻满晴川。`,
`彩线轻缠红玉臂，`,`小符斜挂绿云鬟。`,`佳人相见一千年。`],
[`《端午即事》`,
`宋·‌文天祥`,
`五月五日午，赠我一枝艾。`,
`故人不可见，新知万里外。`,
`丹心照夙昔，鬓发日已改。`,
`我欲从灵均，三湘隔辽海。`],
[`《‌午日处州禁竞渡》`,
`明·汤显祖`,
`独写菖蒲竹叶杯，蓬城芳草踏初回。`,
`情知不向瓯江死，舟楫何劳吊屈来。`],
[`《乙卯重五诗》`,
`宋·陆游`,
`重五山村好，榴花忽已繁。`,
`粽包分两髻，艾束著危冠。`,
`旧俗方储药，羸躯亦点丹。`,
`日斜吾事毕，一笑向杯盘。`],
[`《端午日》`,
`唐·殷尧藩`,
`少年佳节倍多情，老去谁知感慨生。`,
`不效艾符趋习俗，但祈蒲酒话升平。`,
`鬓丝日日添头白，榴锦年年照眼明。`,
`千载贤愚同瞬息，几人湮没几垂名。`],
[`《渔家傲·五月榴花妖艳烘》`,
`宋·欧阳修`,
`五月榴花妖艳烘，绿杨带雨垂垂重。`,`五色新丝缠角粽，金盘送，`,`生绡画扇盘双凤。`,
`正是浴兰时节动，菖蒲酒美清尊共。`,`叶里黄鹂时一弄，犹瞢忪，`,`等闲惊破纱窗梦。`],
[`《‌端午日赐衣》`,
`唐·杜甫`,
`宫衣亦有名，端午被恩荣。`,
`细葛含风软，香罗叠雪轻。`,
`自天题处湿，当暑著来清。`,
`意内称长短，终身荷圣情。`],
[`《端午》`,
`唐·‌文秀`,
`节分端午自谁言，万古传闻为屈原。`,
`堪笑楚江空渺渺，不能洗得直臣冤。`],
[`《己酉端午》`,
`元·贝琼`,
`风雨端阳生晦冥，汨罗无处吊英灵。`,
`海榴花发应相笑，无酒渊明亦独醒。`],
[`《菩萨蛮·端午日咏盆中菊》`,
`清·顾太清`,
`薰风殿阁樱桃节，碧纱窗下沈檀爇。`,`小扇引微凉，悠悠夏日长。`,
`野人知趣甚，不向炎凉问。`,`老圃好栽培，菊花五月开。`],
[`《南乡子·端午》`,
`宋·李之仪`,
`小雨湿黄昏。`,`重午佳辰独掩门。`,`巢燕引雏浑去尽，销魂。`,`空向梁间觅宿痕。`,
`客舍宛如村。`,`好事无人载一樽。`,`唯有莺声知此恨，殷勤。`,`恰似当时枕上闻。`],
[`《贺新郎·端午》`,
`宋·刘克庄`,
`深院榴花吐。`,`画帘开、綀衣纨扇，午风清暑。`,`儿女纷纷夸结束，新样钗符艾虎。`,`早已有、游人观渡。`,`老大逢场慵作戏，任陌头、年少争旗鼓。`,`溪雨急，浪花舞。`,
`灵均标致高如许。`,`忆生平、既纫兰佩，更怀椒醑。`,`谁信骚魂千载后，波底垂涎角黍。`,`又说是、蛟馋龙怒。`,`把似而今醒到了，料当年、醉死差无苦。`,`聊一笑，吊千古。`],
];
let picArr = [], errCount = 0;
var svgObj = null;

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
       
let doAction = () => {
        let picArr = [], errCount = 0;

        let getPictureSize = (url,pIdx) => {
                let img = new Image();
                img.onerror = () => {
                        console.log(url+" 图片加载失败，请检查url是否正确");
                        errCount++;
                };

                img.onload = () =>        {
                        picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
                        img.onload=null;//避免重复加载
                       
                }
                img.src = url;
        }
       
        let dataReady = ()=> {
                if(picArr.length != (pics.length - errCount))        setTimeout(dataReady,50);
                else        {
                        picArr.sort(function(a, b) {
                                return (a.index - b.index);
                        });
                let tw=0,th=0;
                picArr.forEach(pic => {
                        tw += pic.width;
                        th += pic.height;
                });
                const viewWidth = tw / picArr.length, viewHeight = th / picArr.length;
                let opts = {width:viewWidth, height:viewHeight , showObj: showSVG, picAr: picArr};
                let sObj = new mkSVGPics(opts);
                sObj.makeSVGsegment();
                svgObj = showSVG.querySelector('#'+sObj.getObjID());                
                }
        }
pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
dataReady();

}

loadJs("https://cccimg.com/down.php/af4d73a4781cb57f0e3e784a7383e369.js", doAction);

const synth = window.speechSynthesis
var poemIdx = 0;
var utterance = null;
var timeoutID = null;
const pStart = 2, eStart = [-2, -1];

function recitationPoem(idx, pIdx) {
        if(typeof synth === 'undefined')        {
                timeoutID = setTimeout(function(){
                        forward.click();
                }, 30000);
        }
        else        {
                if(pIdx < poems.length - 2)        {
                        utterance = new SpeechSynthesisUtterance(poems);
                        utterance.lang = 'zh-CN'; // 设置语言为中文
                        utterance.rate = 1; // 设置语速
                        utterance.pitch = 1; // 设置音调
                        synth.speak(utterance); // 播放语音
                }

                utterance.onend = () => {
                        if(pIdx < poems.length - 3)        {
                                recitationPoem(idx,++pIdx)
                        }
                        else        {
                                timeoutID = setTimeout(function(){
                                        poemIdx++; poemIdx %= poems.length;
                                        showPoem(poemIdx);
                                }, 8000);
                        }
                };
        }
}
function showPoem(idx)        {
        if(timeoutID)        clearTimeout(timeoutID);
        while (container.firstChild) {
                container.removeChild(container.firstChild);
        }
       
        for(sIdx = 0; sIdx < poems.length; sIdx++)        {
                        let sObj = document.createElement('span');
                        sObj.innerHTML = poems;
                if(sIdx > 1 ) {
                        sObj.style.cssText = `font-size:1.3em;color:white;font-family:楷体;`;       
                        sObj.className = 'tSty';
                }
                container.appendChild(sObj);
        }

        recitationPoem(idx,0);
}
oBlk.onmouseover = () =>        {
        synth.pause();
        svgObj.pauseAnimations();
}
oBlk.onmouseout = () =>        {
        synth.resume();
        svgObj.unpauseAnimations();
}

showPoem(poemIdx);
</script>

klxf 发表于 2026-6-19 23:39:33

漂亮~谢谢精彩分享

醉美水芙蓉 发表于 2026-6-20 08:49:10

klxf 发表于 2026-6-19 23:39
漂亮~谢谢精彩分享

谢谢友友光临！

查看完整版本: 也曾年轻《古诗词里的端午节》