醉美水芙蓉 发表于 2026-6-18 21:51:12

也曾年轻《梅子青时遇故人，梅子黄时听雨声。》

<style>
#oBlk        {
        width:640px;min-height:400px;text-align:center;margin:auto;background-color:hsl(60, 30%, 80%);
        overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px;font-size:20px;box-shadow:4px 4px 10px black;

        #container        {width:640px;400px;text-align:center;
                span       {
                        display:block;margin-bottom:6px;
                        &:nth-of-type(1)        {font-size:1.25em;color:brown;}
                        &:nth-of-type(2)        {font-size:0.8em;color:gray;}
                }
                p        {text-align:left;text-indent:2em;margin:12px;font-family:仿宋;}
        }
}
#ctrlBox        {width:640px;margin:16px auto;text-align:center;font-size:2em;color:skyblue;}
#ctrlBox button {cursor:pointer;}
#selIdx {width:32px;text-align:right;border:thin gray dotted;}
</style>
<div id="oBlk">
        <svg viewBox="0 0 1080 400" id="svgObj">
        <defs>
                <pattern id="hstripe" width="50" height="50" patternUnits="userSpaceOnUse">   
                        <rect x='0' y='0' width='50' height='0' fill="white" >       
                        <animate attributename="height" from='0' to='50' begin="bpic0.begin;bpic1.begin;bpic2.begin;bpic3.begin;" dur='3' fill="freeze"/>
                        </rect>       
                </pattern>
                <mask id="mask8" x="0" y="0" width="1080" height="400" >
                        <rect y="0" x="0" width="1080" height="400" style="fill:url(#hstripe)" />
                </mask>
        </defs>
        <image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkqrZtl49ABEHlQku2SNf3TTeOWwLicBdL0bzvqRd6REG3ZEuNmQLBCsIHhLWzwCVJr6khiaElzQ3IdYwQwTZRibscSLeL8rLBBshw/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic0" attributename="opacity" from='0' to='1' begin="0;epic3.end-2" dur='2' fill="freeze"/>
        <animate id="epic0" attributename="opacity" from="1" to="0" begin="bpic0.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkp7RfwbibpqcBUJHyU0PQRvXSEtoRGpzzXIZXnPHrLxpsJjvqQrS4r99K1M5AxUlEctvzBcoTjl5nuP8VorOMIpm8p68LWm51YQ/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic1" attributename="opacity" from='0' to='1' begin="epic0.end-2" dur='2' fill="freeze"/>
        <animate id="epic1" attributename="opacity" from="1" to="0" begin="bpic1.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrVnaL8LHk5o7KjaJ6rY4VURQbzj1E1dbIkcnrUaWicV4jLSpJ4NTZib2b4xPy2QPkwTXic1EwQeficaibP2fibtQw4oVJiaib4bqeIkM8/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic2" attributename="opacity" from='0' to='1' begin="epic1.end-2" dur='2' fill="freeze"/>
        <animate id="epic2" attributename="opacity" from="1" to="0" begin="bpic2.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrIWtQKsM3tykwtxNQY8Nah7cAthT9DticvtAKS9g619lCd5xRdzTWnRJ3HGO9geTyDeq3qvdrQxoYklzvVJLR4NiaZqK1r3ic72M/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic3" attributename="opacity" from='0' to='1' begin="epic2.end-2" dur='2' fill="freeze"/>
        <animate id="epic3" attributename="opacity" from="1" to="0" begin="bpic3.begin+10" dur='2' fill="freeze"/>
        </image>
        </svg>
        <div id="container"></div>
</div>
<div id="ctrlBox">
        <button id="backward">⇦&nbsp;上一首</button>&emsp;<input id='selIdx' min='1' value=''/>&emsp;<button id="forward">下一首&nbsp;⇨</button></div>
</div>
<script>
//       苏轼笔下的夏天：一半是清凉，一半是心安        https://mp.weixin.qq.com/s/mNxFzL8qsr69KDGL1bUPFA
const tab = `&emsp;&emsp;`;
const poems = [
[`《三衢道中》`,
`宋·曾几`,
`梅子黄时日日晴，小溪泛尽却山行。`,
`绿阴不减来时路，添得黄鹂四五声。`,
`梅子黄透了的时候，天天都是晴和的好天气，乘小舟沿着小溪而行，走到了小溪的尽头，再改走山路继续前行。山路上苍翠的树，与来的时候一样浓密，深林丛中传来几声黄鹂的欢鸣声，比来时更增添了些幽趣。`],
[`《阮郎归·南园春半踏青时》`,
`宋·欧阳修`,
`南园春半踏青时，风和闻马嘶。`,`青梅如豆柳如眉，日长蝴蝶飞。`,
`花露重，草烟低，人家帘幕垂。`,`秋千慵困解罗衣，画堂双燕归。`,
`在南郊的园林中游春，和暖的春风中，时时听到马的嘶鸣。青青的梅子，才豆粒一样大小，细嫩的柳叶，像眉毛一般秀灵。春日渐长，蝴蝶飞得多么轻盈。<br>${tab}
花上露珠晶莹，春草茂密如烟，这户人家已放下窗帘。她荡罢秋千格外疲倦，轻解罗衣床上眠，伴她的只有梁上双燕。`],
[`《首夏山中行吟》`,
`明·祝允明`,
`梅子青，梅子黄，菜肥麦熟养蚕忙。`,
`山僧过岭看茶老，村女当垆煮酒香。`,
`路旁的梅子，有的还青着，有的已经泛黄了；园里的菜长得肥实，田里麦子熟了，家家户户正忙着养蚕采茧。<br>${tab}
一位山里的僧人翻过岭去探望管茶的老者；村落小店前，姑娘靠在酒垆边煨着酒，空气里飘来一阵阵酒香。`],
[`《青梅》`,
`宋·梅尧臣`,
`梅叶未藏禽，梅子青可摘。`,
`江南小家女，手弄门前剧。`,
`齿软莫胜酸，弃之曾不惜。`,
`宁顾马上郎，春风满行陌。`,
`梅树叶子还没稠到能藏住鸟雀，青梅却已经饱满得能摘了。一个江南平民家的小姑娘，在门前踢着木屐耍玩，顺手拈来颗青梅尝鲜。<br>${tab}
谁料青梅太酸，嫩牙受不了，她也不硬撑，随手就把它丢了，半点儿不觉得可惜。<br>${tab}
路边那位骑马的俊俏郎君走过又怎样？她才不特意回头去看——春风正好，满满地吹满一条条郊野小路罢了。`],
[`《夏日》`,
`宋·陆游`,
`燕子生雏梅子黄，断云残雨过林塘。`,
`孤舟正作笭箵梦，九陌难随褦襶忙。`,
`团扇兴来闲弄笔，寒泉漱罢独焚香。`,
`太平处处熏风好，不独宫中爱日长。`,
`初夏时节，雏燕呢喃，梅子由青转黄；林塘上空，飘过一阵阵断云残雨，带来几分湿润的微凉。<br>${tab}
我躺在溪边的孤舟里，做一个烟波钓徒的清梦，早已远离朝堂；那京华九衢的繁华大道上，那些不懂乘凉、顶着热浪奔走钻营的庸俗之辈，他们的忙碌与我无关。<br>${tab}
闲暇时，且摇一把旧团扇，兴之所至便提笔写两首小诗；口渴了，便掬一口冰凉的山泉漱漱口，然后点燃一炉沉香，享受内心的宁静。<br>${tab}
生在太平之年真好啊，这带着清凉与安乐的和暖南风，吹遍了天下每一寸土地；这夏日漫长而悠然的快乐，绝不是只有深锁宫中的帝王家才有资格独享的！`],
];
const synth = window.speechSynthesis
var poemIdx = 0;
var utterance = null;
var timeoutID = null;
selIdx.max = poems.length;
selIdx.title = `选择有效值：1 到 ${poems.length}`;

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

                utterance.onend = () => {
                        if(pIdx < poems.length - 4)        {
                                recitationPoem(idx,++pIdx)
                        }
                        else        {
                                synth.cancel();
                                backward.disabled = false;
                                forward.disabled = false;
                                selIdx.disabled = false;
                                timeoutID = setTimeout(function(){
                                        forward.click();
                                }, 5000);
                        }
                };
        }
}
function showPoem(idx)        {
        if(timeoutID)        clearTimeout(timeoutID);
        selIdx.value = idx + 1;
        while (container.firstChild) {
                container.removeChild(container.firstChild);
        }
        backward.disabled = true;
        forward.disabled = true;
        selIdx.disabled = true;
       
        for(sIdx = 0; sIdx < poems.length - 1; sIdx++)        {
                let sObj = document.createElement('span');
                sObj.innerHTML = poems;
                if(sIdx > 1 ) sObj.style.cssText = `font-size:1.3em;color:red;font-family:楷体;`;       
                //else if(sIdx == poems.length - 2) sObj.style.cssText = 'text-align:left; margin-left:1em;';
                container.appendChild(sObj);
        }
       
        let pObj = document.createElement('p');
        pObj.innerHTML = poems.length - 1];
        container.appendChild(pObj);

        recitationPoem(idx,0);
}
backward.onclick = () =>        {
        poemIdx--; if(poemIdx < 0) poemIdx = poems.length - 1;
        showPoem(poemIdx);
}
forward.onclick = () =>        {
        poemIdx++; poemIdx %= poems.length;
        showPoem(poemIdx);
}
const vMin = parseInt(selIdx.min);
const vMax = parseInt(selIdx.max);
selIdx.onchange = () => {
        if(parseInt(selIdx.value) < vMin)        selIdx.value = vMin;
        if(parseInt(selIdx.value) > vMax)        selIdx.value = vMax;
        poemIdx = parseInt(selIdx.value) - 1;
        showPoem(poemIdx);
}
oBlk.onmouseover = () =>        {
        synth.pause();
        svgObj.pauseAnimations();
}
oBlk.onmouseout = () =>        {
        synth.resume();
        svgObj.unpauseAnimations();
}

showPoem(poemIdx);
</script>

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

漂亮~谢谢精彩分享

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

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

谢谢友友光临！
页: [1]
查看完整版本: 也曾年轻《梅子青时遇故人，梅子黄时听雨声。》