论坛 › 欢乐水吧 › 苏轼笔下的夏天：一半是清凉，一半是心安

也曾年轻 发表于 2026-6-13 12:44

苏轼笔下的夏天：一半是清凉，一半是心安

<meta name="referrer" content="never" />
<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/RKBUapibjBkqC3ufSBiay706YGsuVy55LphgEfzibCyW0VyMFnV7z0qJ7AOia20w0eelk31WDRURzMAKpImF3ZPnm14Z7xyiamuCZoxqFLdJX8ick/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/RKBUapibjBkqTiaoXX05Yf64zYXlibJ9nBrIrDw1UXuBPBlGoLXwQquib9ppqFRSINWZN7NWS8UEOic74hjEvKLH3PwDdT4LUxHVs1YobYHFmAcA/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/mmbiz_jpg/RKBUapibjBkpE96Y2VXOJWeY6o1xnibnyONWVJI8s3R1lrUygmcYdq6nT8Eib8y8XUGSEoGibEd3QwmfQw4bxkG5x9CNichbo72sziawu5df1VE1E/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/mmbiz_jpg/RKBUapibjBkqSFskQOljWiaROOYDsO1X1WsaVWrRhIBobF4LSULkBl7nciapcib1zU4lRuDXziaKKFAvylqf86qPH497oHkUXs5mvcAiafUPzpQHI/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}
一位须发半白的老人扶着藜杖踱来，眼皮半抬，像是微醉、又像是暑气熏人；他才捋下青麦穗，捣成麦粉干粮，权且把辘辘饥肠先安抚住。我（或行人）朝他搭话问了一句：这豆叶还要等多久，才能黄熟呢？`],
];
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 - 3)        {
                                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 > 0 ) 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>

红影 发表于 2026-6-13 13:18

这些词句里的夏好美，活色生香，给人那么真切的感觉。
感谢也曾年轻的好帖{:4_199:}

也曾年轻 发表于 2026-6-13 13:46

红影 发表于 2026-6-13 13:18
这些词句里的夏好美，活色生香，给人那么真切的感觉。
感谢也曾年轻的好帖

下午好！ 谢谢欣赏支持！

魏淑芬 发表于 2026-6-13 13:47

炎炎夏日，心静自然凉{:4_180:}

也曾年轻 发表于 2026-6-13 13:48

魏淑芬 发表于 2026-6-13 13:47
炎炎夏日，心静自然凉

下午好！谢谢欣赏支持！

梦江南 发表于 2026-6-13 13:48

这帖制作又进一步了，上面加了动画特效。太厉害了！{:4_187:}

梦江南 发表于 2026-6-13 13:51

欣赏老师美帖，点三连赞！https://q1.itc.cn/q_70/images03/20260228/afe38ef2df864af6accc94ace625214f.gif

也曾年轻 发表于 2026-6-13 13:52

梦江南 发表于 2026-6-13 13:48
这帖制作又进一步了，上面加了动画特效。太厉害了！

下午好！谢谢欣赏支持！

也曾年轻 发表于 2026-6-13 13:52

梦江南 发表于 2026-6-13 13:51
欣赏老师美帖，点三连赞！

怎么还回来了{:5_106:}

杨帆 发表于 2026-6-13 14:11

效果漂亮，有消暑功效，谢谢年轻老师精彩分享{:4_190:}

梦油 发表于 2026-6-13 14:19

学习了，谢谢也曾年轻朋友提供这么好的学习机会和条件。

梦江南 发表于 2026-6-13 14:37

也曾年轻 发表于 2026-6-13 13:52
怎么还回来了

也给这帖加加油{:4_189:}

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

杨帆 发表于 2026-6-13 14:11
效果漂亮，有消暑功效，谢谢年轻老师精彩分享

下午好！谢谢欣赏支持！

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

梦油 发表于 2026-6-13 14:19
学习了，谢谢也曾年轻朋友提供这么好的学习机会和条件。

下午好！谢谢欣赏支持！

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

梦江南 发表于 2026-6-13 14:37
也给这帖加加油

https://q8.itc.cn/q_70/images03/20251113/a161d601e2484e018cf3c808b57c20c1.gif

梦油 发表于 2026-6-13 16:30

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

也曾年轻朋友别客气。

也曾年轻 发表于 2026-6-13 16:40

梦油 发表于 2026-6-13 16:30
也曾年轻朋友别客气。

https://img1.baidu.com/it/u=3292077643,2735862662&fm=253&fmt=auto&app=138&f=GIF?w=227&h=209

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

好诗就如凉风会吹走夏日的湿热，带来清凉。喜欢也曾年轻的好帖，赞佩~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-13 18:38

霜染枫丹 发表于 2026-6-13 18:18
好诗就如凉风会吹走夏日的湿热，带来清凉。喜欢也曾年轻的好帖，赞佩~~

晚上好！ 谢谢欣赏支持！

https://q8.itc.cn/q_70/images03/20251113/a161d601e2484e018cf3c808b57c20c1.gif

红影 发表于 2026-6-13 22:23

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

应该谢谢你带来的好帖才是{:4_187:}

查看完整版本: 苏轼笔下的夏天：一半是清凉，一半是心安