图说唐诗宋词经典

也曾年轻 发表于 2026-5-6 12:36

本帖最后由也曾年轻于 2026-5-8 11:25 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#outframe {
width:810px;height:600px;position: relative;box-shadow:-4px 4px 10px black; margin: 50px auto 30px calc(50% - 405px);
overflow:hidden;border-radius:10%;background-color:hsl(60, 5%, 85%);}
.lrcShow {
font: bold 2em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
bottom: -20px;
left:20%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 2px;
}
.sChar {
// display: block;
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 0.3s var(--delay) forwards;
}
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
#showSVG {width:810px;height:550px;position:relative;}
</style>
<div id="outframe">
<div id="showSVG"> </div>
<div class="lrcShow" ></div>
<div id="controlBox" style="position:absolute;bottom:0px;right:30px;z-index:199;width:60px;height:60px;visibility:hidden;">
<svg viewBox="0 0 100 100">
<circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4">
</circle>
<circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2">
</circle>
<path fill="red" id="playCtrl" d="M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z">
</path>
</svg>
</div>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbQq9futFR20KibcxPC3pUnvfhcUvLlfguPTPMhUqwWsomJyAk9wqUreA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbWhjzzFdrnwT9yDSDXhtOibvzobBYafjSQYFWEkSKto2pZJBq5rXTLfw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbDvCmJ6PGB1RhaAL34YPWHgYu6senOJ5HTvibguhNbhnMkPSOqKCYKiag/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbzSwd3mOrUXeY7pibTrFSsDygEG0mEqKy5fZZuEWmN8ISRCBy8W2tVhA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbzcsltYpGjdeOtvXxoZTXPRULvHIicBN7gGaYk96I6aoa4xfiazMAeRgg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb8z7PycQc2ebz4opxfsibdtzfRVabBVsB0whdvnpcYkJqjUicOgpr4G1g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbkQ2p30icIGV7dAwMoEqVRw4XJibru2PskrHZibaPviaAHeVma8HRRyZgMw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbtG2N71Lz3mibh4Kxic4W8OgpI4Ajo3laXiaWPue9s9DVIadS23v2XOEaQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbtx37sicsmNeuEjTHic3pby3iaoIoMR1ohlsDuRGdRpicoqPf0buL6F2KWw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb3At4FOUY1iaJdGNWv0IIQA4WLoHfWkPPDZmkBbOUIwFTteuarz3jWlg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbcv8kkMIF3EScfibvamaNiceyoMZGTuNmliazZc9v8CC8hysYQavBIH50g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb5UyueRGpoaXs4XIUUd2wr70dlI5zVgEOgdXZcchV6hHVvxSlr5963g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb9f0Ff1XvEPJFsnRickwtJy425ict4b9EPfOz2WcQia4grw1cLCZxt0NsA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb11dycibPQwicZeJ9Eeus9ia2bnGZ3CQo3rzSd1HiauKQ0ZUOx3glWT7h9Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbb7zNXK10MmWbHy8zibSWh4EqWnZyicawyYY1TYFiaicYF1lvib6ibTzv4Y5A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbH78dXOZDUsFGP5iaLbSI5laFVvQHLiarqicsEyJEa70H1JIAEUgCTQgxQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbZpOR7mlgclSgzahUy9ekjavZS38GFbN7AGJccFEZzQITCfdYVIRQbw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb0hKgWZFgJVKJX4moAVXUAjfvrl7E5DHtZXLSUCmNib1ibxNHvOSGH2ug/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbttQrB5jnUG9Yt8w1DNuyK18dbOcAibCbdAR4Sn1FHSiaDlJPDTeMiazew/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbVLZUibciaGxics4PTHZeGL7SkicQjmyUM0JGltkd2O22ic0MpJokswNjKYw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbdAL8j6M4SEAl0NBAJaQMVadE11sWAWK6vxW2f0Lria31TmeibyiaMqyQw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbGpHzstF4EiaewsfPhHX2ClbKNdWib20XTdldVBQA9FJCfs1QtPFnhW5Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbutZKpeZd4YAln4KlicoWJRbNn9TJIdIeop9HDwOlTCAx6NH5aaeOibtA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbNf0rGsIYiboRcT1uWOHXqo4qYV8XvdrpntEsAsVu1vc8ngmzEicNsteA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkblRcibeibe0ibCmDyoaZicwZZsTWQRPPm9gAh3e9iaQbC5Hd51ibibfM0veXIA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb9ibmxRPy4BsLBN0AJ3DzEzuvUpicsh2cBJxbSjBpz0vvq9nT3CdwVNPw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbYBJJk7d1D8JoR3gVRph2dB2jwgL00pCttuw3ickWic3TIs1hmN3ouIMQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb0115eAy2yJtl5mY7HeoHbg5bQgMxexoHIB7FnyGsJibnyzC5yJibokibQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbI0WhicVl7kL85zjx8TbtcRPmnRXUKjVj12Xwmkp1NF42icTVlzn7lYoQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkblM4mapg0vL14e7UK7ZA95293icgnhw62bRFXic3CeHoF4NqpwPfzmDwQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbddzHGIqRTLfJibOu3WBeCL1xTXaIZ9sN6GeXpp6BK3QjBdoFGySQiaGA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbwTjXRImqORHgAZNIL2bpgv7kicWygpia63Bib0NVLzdwlvlkvLGqFPwhQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbt6fGibbXs8icJVaXvOXFCAgWiakibfjKiaP1kZvQQXia4fpR0rzjpJ10R6VQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbGYEqdick8HzjISt1ibc2r1JQ782VEz9pqRVeHQkScD4ibJ9tRECK3H8Ow/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb6Q7SeDKT12iaX2cLEaDBmMEzWpVrjLxV8ibpicSQAiclaZw8zyoYtMyz5A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbEjicWIquqmFFXEp43iaeooYlSWS9H83cVn8piaQKLtzeNOM4zRwzehzew/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbILSySOgFUnFiaFBAN8iaeGKIGGHt6ZEL3PgezDgQpD9ux5G6L4qnzOwA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbphp6xuCfKQbxG5XexhniaXakgCuAWzAIvf2SXsfe90e4icynp6XRHrIw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbLVia7ZAQBeEzePuib1APqMj8g7GlSLwwv91BZ3EwZH5lOEvL71KUj1wA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb6JMoETcaibukAnR9g9GgaOtiaUic79SBXjwCKCo43QkfqqGocUXUkwIibg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbq5bC8iaYOgDdPicue3vJ9AyWOGocrJARV9uDI5dP8yccxMD2PklUTCdw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb6nhzNyw3ibxZ2Cia4XCbJqlgpFc1O0EQewcWnwuul1TEGy0p4UR0WJ5g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbarUjYqWshTwhO7aakEhiaG6FMaV0jt5SibEUHXfVSQtnansovLiclymUg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbImbeSbZqlKseP8jgbT5D98iaiaSIcbKby4MpfN7cvsoD3MCr3xwnpYGQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb6Fmu91WhbibPPIebeictbXGQkODQGNjUNXDyAZqdE7eAZKRACIxW80VA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbRia6E0WVhp6CIGNHTwFGY8mLrnk86kVVdWh18IQUbVVicAOibVpxRHeFA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbVrNbIoTyviaIHl4gbpbJicvIQ1dhhN4jmBlia5deF7B6KuYuhA6iadn0icQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbd3XiappLh7HPicPR0SfA7WpnfiaShpRrWCwibAJa6PV3fkiagKOctbQhfYQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbks15JEogTbzDduiaSYzDmnsyFWKZcgLxP1nWXk4iaDjY0srbgpVjZUdg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbjasaMicCOgLv9Q7d2Q34FHafWYBOpRoibJDibzxjDFjYRiaCEgJ9taOnow/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbyzwxn4ATltzVOWyZlibjzIb9zbZpPGKmk7WDYeias8Zl97cl5ibmrEZ5g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb3vVibEXZFJ3ibKq6TuIfgd91qFdt985ltpUcpiapEDtstN2oxdxBQmGUw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbfO4sk79cOyw0LbfCgmRY6qcjIWIib6EY957Imib4Ka1hh768eylKDuVg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbJYytKGxNXDlmsQqGVDCjHKKPAHnTOA9C7yIGHZCmj0tlYjcxqffkaA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbCbibNcAfo2mLdk9aXWRQRwBegOurBFBr4M4d5vVcFAU2QIB63VqPMJA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbsBcRw6iba7xczKEtMUZo5HLHSicsDqjj0oWou0Q7yvO4slnicLIF8UrSg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb3EyV6QCTs3COf9KuZHhuZvyxm0xHhNmYgjDqGHcFemglcRW1UFLCOA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbxRplBrPibDb5A25OEJNG9yCxuIOHaa6jNYiaCl2kqqx77doYchTia1Nhg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbshTQh6Z9ibGgibEYEp0Nkl89cm8Rdw5qHbwEic6gfLmZD3JT2yb9pok7Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbNSrC74sCjVEq7woCrMVJTlOw6dMzTNCtBs2CPpUKQQd9DF4Bia3A4YA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb6T6H0dEXqXdmib03Fx3Jib8x6ImibGGwynhq7bMkaTqsRrGoAekqSy13A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbfMPxCoTPOO6icXMM8GrgJ2aRgmrLhv5PRoiaXJmnxaxe0RKgTX1EeMLA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbSxQQvP6hmDibCWOX8IFCHtfSIv17ReLUDxKKVWWWMiavqk15kf55bDNw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbY7kozt4ph2FJGN7MvTeNIlbBKNJdgD2jYR9vRtVKR75IiaVXyk9HCWg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbQsXOReOyQfaB7bDAM0fsXUZRHDFyV2EMIdjoF5o0ZrFFcjgvaysibTg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb8ZMFfiag5V0e9pZUIlVtwp6DjicrECSFxiaqZkvA0bAWI1YnDkk2ZXibgA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbiaopNqkoHYCmoFq6iaTLrtEjicHlP3rRreXt2bZbJ6eMHoFjjJ95R0wVA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbMibfpzZ3zIn86UYEZuWd9KruicLic89RDciafWCGTOW1EcUyxwDXRsiaxQQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbbEMqqhic4rK9zZcBYkBN2gpSkXRfGr9NQhb18SiagPBC6LEJN5NA59SA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbWaUMG18w9WcicUwVcG73aAJiazv80KY2FcCbNfjYGLkLpBFTzTk5fJFA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbf502wdHbZoUC9b6mtRg3KaFdMLrfnt4ibIhaOY3mwu33NXaW6IBwJRg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbMdwiapGniaqib3Aick4vkvtqfNEXiaK4rHkcLpsX3t9pNribAnIicIlt0FzRQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbRlP8cjVq8TXGQ7DtbKYrMa85oeicMLgzgX4KzLheUgtwecCAUtibAHyw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbODuLWUtZyyIVS9YVvrEKKWOqdljibNkyb4uw5XbJXj6WicOEDRStsQeQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbrTv1gVuicicdzc4KXQaH5WOrxbXYMOB6uHPvShdPYLDuficDrMBIib6huQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbQ2ibAhXBdbZRBpcX14uHVFeZz8Awc8MarIOCgyL8d0RYZBn3TqOl38g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbc4ZLiaiacBqWAOv29GoKhb3rmMYbS8E6ZhQa7tgkLOMq66KvnbzzrGgg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbSnWibnaiczMLiaCDtfQGNA8N8yFicgOjZz9OosCdOcEB6GKLIsdsDTHxdA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbKVILszNJWgu9LQ090I93ZmOicAtdNxibX5CWDickefHbNiaMDuCzKCeZTA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbSzPnzDtXcymGNcE4yWSgwXv03KCEicW7ibIicibiagqdy1fUIjm8fUXPjBA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbx9m7tmC3kyYWcp2mSKC8x9Rm0XTohZlYPK1CpJxfJ96pgTP48MDxPA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbyKhJica9EYkogngibF5Abmz6Er88jRiaYKuzaEKAia3cJOrib1lXJtGsq3g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbufwcuExO4nTPnquBKGOOfibVdeibBMicibkyvAKs9FOkjkpYZFA9eRVDIw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbTymHSUO5LXXB0xLB7VQic7iajOyhSyjhoq2Xv0oLpDARbEtqgzcBpuEg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbQscsXCxFkD6OvRnKWiagk4FyHhxKzPYicoibicNG8VBvyU5uRntf76C8ZA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbSkqwVo6fyuibsJRicsr2VoNru3z0ruJ4OcQG0x14SDYknWeoOu4iccJPQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbol2M7RB2s1h7CdqK1QsRnP4sHMAYRCtOwho7LNNvzUY8Eicj6ibaED4w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbhvMgohWicC3aoia5UcHDqHsAIib1oppqmYmTMGtGic1DmAnwuFcxibbOzAA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb7iajNUVfvoZglMwMB2Z5chB4AjibdoQ0EY9K9L2XZ3rhMp78lk21llKg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbGOABzS3zZg2t9icia4SCtib8M0uxiaeuo2A4mEGO8KIBGgha1zKcqYSTmA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbicuHEejicn2FwDoaaBnamYib5G2DszBibFZxza8BibQfwazA3cYDUicbpBdw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkblY6OhlburtXNXnbLPJuXB22sVBXg5vDEHX9zbT79XxV8rhYlXhASOQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb77p3eFOY7aQW5lYUT7bZiaRqNicRulQbS7cpMjavXr1ic95SOtrIKEuAA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbMvOdvJFBRTvOgN0pkibmqxDqlUibHL7zJPoBiaPXLyjsGxCh9GKR6oxtg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbLcxD452rnmrEcTAgU51N0zzWBxPrMibhcOYSQOicllBicqLdMyibibAysag/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkb5F2ZlUvD3gyxnLsbeibPibZBzytq2hZqgMaNpk07Rib6NGgpcUL0jr7nA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbjpAbEVgse9eKdLdLgFyW4DLFFYaz41cB0jicxqMd5oKRfc9VCs2q0VA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbZOL886f6mfOicIu7q4SMMTD6NSZdlg2iavrFfypM7o9bnnHuw57Q2GtQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbscODReYht27YI93QcLtt5tvGECV370Q4WicJXQEL3DZYv3VyrwpLbeA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/lWziafCDwW1Cf050ktYL01108iaaVib7tkbMn0V1bCjaiaSAUAoia0zst3p75KTdCSReT1DVicAGicichCvB8LkuBibwQMA/640",
];
/**
var sf = document.createElement('script');
sf.type = 'text/javascript';
//sf.src = "script/genSvgClass.js";
//sf.src = "script/lrcPlayerSvgMaker.js";
sf.src="https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js";
sf.charset = "utf-8";
document.body.appendChild(sf);
***/
const 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);
}

const genAniPic = () => {
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 opts = {width:showSVG.offsetWidth, height:showSVG.offsetHeight , showObj: showSVG, picAr: picArr};

new mkSVGPics(opts).makeSVGsegment();
outframe.addEventListener("mouseleave", () => {
svgObj.unpauseAnimations();
controlBox.style.visibility = "hidden";
});
outframe.addEventListener("mouseenter", () => {
svgObj.pauseAnimations();
controlBox.style.visibility = "visible";
});
}
}
pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
dataReady();
}

loadJs("https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js", genAniPic);

const lrctxt = `
唐诗宋词
作词：覃世传
作曲：覃世传
翻开泛黄的诗篇
墨香四溢岁月间
唐诗里的明月照了千年
宋词中的相思情意绵绵
醉了酒后诗百篇
豪迈气概立江川
唐风宋韵流淌在你心间
古今共情这夜梦未眠
唐诗宋词永远的浪漫
穿越时空没有羁绊
字句间皆是情的婉转
心醉在这千年的的灿烂
朱阁中的晓风残荷
十里的空山新雨落
婉约的世界宛如星河
璀璨光芒芒哪会凋落
春夏里婉约惆怅
天寒的塞外风霜
岁月长河里的光芒
照亮我们文明的方向
唐诗宋词是谁的浪漫
穿越时空没有羁绊
字句间都是爱的传承
心醉在这千年的灿烂
让我们把这古韵传唱
让诗意在心中流淌
唐诗宋词永远的华章
传承的力量无可阻挡
唐诗宋词永远的浪漫
永远是我们
华夏光辉的篇章
`;
const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
const playPath = "M35 35 l30 15 -30 15 z";
const opts = {
lrcTxt:lrctxt,
audioURL:"https://s2.cldisk.com/sv-w8/audio/fa/d4/54/be09ce78cdc3bdfc0f8dba1679f73391/audio.mp3",
//canvas:cvs
}
/**
var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
//sf1.src = "https://cccimg.com/down.php/5a22fae8e3c882e53f8d677698997e43.js";
sf1.src = "https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js";
//sf1.src = "script/lrcPlayerFrgD.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
**/
const genLrcPlayer = () => {

let lrcPlayer = new lrcPlayerFrg(opts);

const musicObj = lrcPlayer.getAudObj();

const pState = () => {
musicObj.paused ? (playCtrl.setAttribute('d', playPath)): (playCtrl.setAttribute('d', pausePath));
};

controlBox.onclick = () => {
if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
lrcPlayer.getAudContext().resume();
}
if (musicObj.paused) {
musicObj.play();
} else {
musicObj.pause();
}
}
//musicObj.addEventListener("timeupdate", () => {
// myRange.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
//})
musicObj.addEventListener('play', () => pState());
musicObj.addEventListener('pause', () => pState());

musicObj.play().catch(_ = () => pState());
}
loadJs("https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js", genLrcPlayer);

</script>

梦油发表于 2026-5-6 14:27

在这里学习真方便。谢谢你，也曾年轻朋友。

梦江南 发表于 2026-5-6 14:35

图说唐诗宋词经典，这个好看又好听。{:4_187:}

梦江南 发表于 2026-5-6 14:39

哇，这么多张数的链接都是直接贴过来的，真了不起！太厉害了！{:4_204:}{:4_178:}

梦江南 发表于 2026-5-6 14:52

还是一键可暂停的代码，下次学一个。{:4_199:}

也曾年轻 发表于 2026-5-6 15:15

梦油发表于 2026-5-6 14:27
在这里学习真方便。谢谢你，也曾年轻朋友。

谢谢欣赏支持！下午好！

也曾年轻 发表于 2026-5-6 15:15

梦江南发表于 2026-5-6 14:35
图说唐诗宋词经典，这个好看又好听。

谢谢欣赏支持！下午好！

也曾年轻 发表于 2026-5-6 15:16

梦江南发表于 2026-5-6 14:39
哇，这么多张数的链接都是直接贴过来的，真了不起！太厉害了！

链接成批拷贝过来的不费事。

也曾年轻 发表于 2026-5-6 15:20

梦江南发表于 2026-5-6 14:52
还是一键可暂停的代码，下次学一个。

其实是两个控制，鼠标进入/离开控制的是画面动态，鼠标点击控制的收歌曲的播放。

梦江南 发表于 2026-5-6 15:36

也曾年轻发表于 2026-5-6 15:16
链接成批拷贝过来的不费事。

在手机上看不到图片。

梦江南 发表于 2026-5-6 15:38

也曾年轻发表于 2026-5-6 15:20
其实是两个控制，鼠标进入/离开控制的是画面动态，鼠标点击控制的收歌曲的播放。

哦，也用了外链的封装，这样又少些代码。{:4_199:}

梦江南 发表于 2026-5-6 16:02

也曾年轻发表于 2026-5-6 15:15
谢谢欣赏支持！下午好！

问老师，如果用别的MP3同样的代码设置能用吗？

梦油发表于 2026-5-6 16:17

也曾年轻发表于 2026-5-6 15:15
谢谢欣赏支持！下午好！

也曾年轻朋友别客气。

也曾年轻 发表于 2026-5-6 17:32

梦江南发表于 2026-5-6 15:36
在手机上看不到图片。

嗯，很遗憾{:5_102:}

也曾年轻 发表于 2026-5-6 17:34

梦江南发表于 2026-5-6 15:38
哦，也用了外链的封装，这样又少些代码。

重复使用的代码这样省事且不易出错

也曾年轻 发表于 2026-5-6 17:36

梦江南发表于 2026-5-6 16:02
问老师，如果用别的MP3同样的代码设置能用吗？

和MP3没多大的关系，不过好像彩虹盘不太好

梦江南 发表于 2026-5-6 17:37

也曾年轻发表于 2026-5-6 17:32
嗯，很遗憾

手机上不兼容

霜染枫丹 发表于 2026-5-6 18:18

这个制作可真漂亮！！真是匠心独运！特别赞佩~~会好好学习一下。谢也曾年轻的分享，恭祝夏安！！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-6 18:23

轮播图的阴影很是漂亮！学习了~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-5-6 18:39

霜染枫丹发表于 2026-5-6 18:18
这个制作可真漂亮！！真是匠心独运！特别赞佩~~会好好学习一下。谢也曾年轻的分享，恭祝夏安！！{ ...

谢谢欣赏支持！下午好！

页: [1] 2

花潮论坛's Archiver

图说唐诗宋词经典