《灯火良宵：元宵节的由来与传说》
本帖最后由 也曾年轻 于 2026-3-3 16:41 编辑 <br /><br />点击图片听元宵节传说<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root {--w:740px;--h:740px;--offsetX:0px;}
#oBlk {width:var(--w);height:calc(var(--h));position:relative;overflow:hidden;border-radius:12px;box-shadow:4px 4px 10px black;transform:translateX(var(--offsetX));background-color:skyblue;}
#pichold {height:calc(var(--h));position:absolute;left:0px;}
#pichold img {width:var(--w);height:var(--h);position:absolute;top:0px;}
.divBlk {width:var(--w);height:calc(var(--h));display:inline-block;position:relative;}
</style>
<div id='oBlk'>
<div id="pichold"></div>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/q3fPZZ18qhQickicOBWd7f6RibfoC4iceXtuHOwo1aoS3dETzuhibJ8ia9yQKEOWUiab4QlgtFD9gYLPI0NDibZR5kA1foBvnLu2ekxtp5BHhr6tEicU/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/q3fPZZ18qhSKWuH9xu2AGIMkpNtHBaC7CXHPaC8v1cZ83FJ70XHXxv9fFAvJFAVwGPYSxnJ4LDtZtxROXvqP0LM8EJ8mnVibXq08oKICZT3c/0",
"https://mmbiz.qpic.cn/mmbiz_jpg/q3fPZZ18qhQHMZOict1s7dH7GeWhtHIaO3ungp7xsvbjEGP5pibbeLRHmeXBveNl8HEfwZShV8Wtuw59b6hn8Ka4kfYg5K1b5SPBDSeNDPKjs/0",
"https://mmbiz.qpic.cn/mmbiz_jpg/q3fPZZ18qhSRcpnZUVkQGjEmITP7MPXINfMicOJfPRJhpTicf4EZdMuPiafowNNrkONM9hhgNaLYr2U1JvuYKGuaDCoon4M66olNaUJ2aSYoTQ/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/q3fPZZ18qhSkSqVaFcjibSUhwShf2YsAAe5icC0HRjw6GmskvpMvhZmTtibicpv3TmBicKFKwCCUVMnX2pRgjmL34kX4D9WyMhW3DVSuyMOzRjKU/0",
"https://mmbiz.qpic.cn/mmbiz_jpg/q3fPZZ18qhSnaNGZ7rHHZG9LtfazL8t4CqA2tMezxicV6UyUXD6Pib5cpHV5Odv8JibZliaTKDWc42cH0BicLsBoBx4Qs8gp8eTKIbkiajlwYYCMA/0",
];
const descTxt = [
`《灯火良宵：元宵节的由来与传说》`,
`东风夜放花千树，更吹落，星如雨。”每年农历正月十五，当新年的第一轮圆月挂上枝头，我们便迎来了春节的压轴大戏——元宵节。这一天，家家户户吃元宵、赏花灯、猜灯谜，用最热闹的方式，为“过年”画上一个圆满的句号。`,
`关于元宵节的起源，众说纷纭，其中最广为流传的说法与汉代的宫廷祭祀有关。相传，汉明帝刘庄提倡佛法，他听说佛教有正月十五僧人观佛舍利、点灯敬佛的做法，便下令在这一天夜晚，皇宫和寺庙都要点灯敬佛，并令士族庶民都挂灯。从此，这种佛教礼仪便逐渐演变成了民间盛大的节日。`,
`另一个充满传奇色彩的传说，则与一位名叫“元宵”的宫女有关。相传汉武帝时期，有位名叫东方朔的大臣，为了帮助一位思家心切的宫女元宵与家人团聚，便设计在长安城散布“正月十六火神君奉玉帝旨意火烧长安”的谣言。武帝大惊，向东方朔求计。东方朔便建议，在正月十五这天，让擅长做汤圆的元宵姑娘做很多汤圆供奉火神，同时命令家家户户做汤圆、挂灯笼、放烟火，伪装成满城大火的样子，以此瞒过玉帝。到了正月十五夜，长安城灯火通明，元宵的家人也进城观灯，终于与元宵姑娘团聚。因为元宵做的汤圆极好，人们便把这一天叫做“元宵节”，汤圆也从此被称为“元宵”。`,
`此外，道教文化中称正月十五为“上元节”，是天官赐福的日子，人们在这一天燃灯庆祝，祈求天官赐福。无论是源于敬佛、祭神，还是为了人间的团圆，元宵节的核心都离不开那一盏盏明亮的灯火。它们驱散了冬夜的寒意，也照亮了人们对新一年的美好期盼。`,
`千百年过去了，元宵节的传统依然在延续。那圆滚滚的汤圆，寓意着生活的甜美与圆满；那一盏盏流光溢彩的花灯，承载着我们对未来的无限憧憬。在这个花好月圆的夜晚，愿灯火璀璨，万家平安。`,
];
let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
pichold.style.width = `${wVal * pics.length}px`;
const synth = window.speechSynthesis;
var utteranceArr = new Array();
pics.forEach((pic,idx) => {
let divObj = document.createElement('div');
let imgObj = document.createElement('img');
divObj.className = 'divBlk';
imgObj.src = pic;
imgObj.title = descTxt + " 点击看下一画片";
utteranceArr.push(new SpeechSynthesisUtterance(descTxt));
divObj.appendChild(imgObj);
pichold.appendChild(divObj);
});
let numPic = pichold.querySelectorAll('img');
pichold.onmousedown = (ev) => {
if(synth.speaking) return false;
let styleLeft = parseInt(pichold.style.left);
let sbOffsetWidth = parseInt(oBlk.offsetWidth);
let imgOffsetLeft = parseInt(pichold.offsetLeft);
if(ev.button === 0) {
if(styleLeft > ((1 - numPic.length) * sbOffsetWidth)) pichold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
else pichold.style.left = '0px';
}
else if(ev.button === 2) {
if(imgOffsetLeft === 0)pichold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
else pichold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
}
synth.speak(utteranceArr);
}
window.addEventListener('keydown', function(ev) {
if(synth.speaking) return false;
let styleLeft = parseInt(pichold.style.left);
let sbOffsetWidth = parseInt(oBlk.offsetWidth);
let imgOffsetLeft = parseInt(pichold.offsetLeft);
if(ev.code === 'ArrowDown' || ev.code === 'ArrowRight') {
if(styleLeft > ((1 - numPic.length) * sbOffsetWidth)) pichold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
else pichold.style.left = '0px';
}
else if(ev.code === 'ArrowUp' || ev.code === 'ArrowLeft') {
if(imgOffsetLeft === 0)pichold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
else pichold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
}
synth.speak(utteranceArr);
});
oBlk.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
let setElmCenter = (elm) => {
const parentE = elm.parentNode;
const rect = parentE.getBoundingClientRect();
const winCenter = window.innerWidth / 2;
let offsetX = winCenter - (rect.left + elm.offsetWidth / 2);
//if(rect.width > elm.offsetWidth) offsetX = (rect.width - elm.offsetWidth) / 2
elm.style.setProperty('--offsetX', `${offsetX}px`);
}
setElmCenter(oBlk);
window.onresize = () => setElmCenter(oBlk);
pichold.click();
</script>
是不是手动才会翻页？ 梦江南 发表于 2026-3-3 16:58
是不是手动才会翻页？
是啊， 这样才可以启动播放声音。
因为每段解说长短不一不好自动控制时间 要等它讲完了才能翻到下一页。 点击图片有文字条出来，讲完了才可以点下一页。 元宵原来是位宫女啊！长知识了 ！{:4_199:} 2026元宵至，愿汤圆暖人心，灯火照前程，马年福运满满，平安喜乐一生。{:4_204:} 梦江南 发表于 2026-3-3 17:05
要等它讲完了才能翻到下一页。
没讲完前不能翻页免得混乱了。 梦江南 发表于 2026-3-3 17:06
点击图片有文字条出来，讲完了才可以点下一页。
就是试试文本转语音的功能 梦江南 发表于 2026-3-3 17:10
元宵原来是位宫女啊！长知识了 ！
网上说法很多，这就是一说。 梦江南 发表于 2026-3-3 17:13
2026元宵至，愿汤圆暖人心，灯火照前程，马年福运满满，平安喜乐一生。
https://dingyue.ws.126.net/2021/0915/aef623a7g00qzh97l01gld200m800gbg00m800gb.gif 这是也曾年轻制作的原创小人书，而且是有声读物，制作的漂亮！！赞佩~~
https://www.yueyijyw.com/data/attachment/forum/202603/02/213721a5yxykm88xcey5ky.gif
在这个花好月圆的夜晚，听元宵节的故事别有情趣{:4_176:} 原来元宵有这么多讲究。这个制作很别致，点击开始讲解后，鼠标不动还能看到对应的文字呢。
欣赏也曾年轻好帖，元宵节快乐{:4_187:} 也曾年轻 发表于 2026-3-3 18:34
就是试试文本转语音的功能
是在帖子里直接转的么？没看到有语音文件啊{:4_204:} 霜染枫丹 发表于 2026-3-3 20:22
这是也曾年轻制作的原创小人书，而且是有声读物，制作的漂亮！！赞佩~~
https://q8.itc.cn/q_70/images03/20251113/a161d601e2484e018cf3c808b57c20c1.gif 杨帆 发表于 2026-3-3 20:22
在这个花好月圆的夜晚，听元宵节的故事别有情趣
谢谢欣赏支持！
https://img0.baidu.com/it/u=2820404645,2127916929&fm=253&fmt=auto&app=138&f=GIF?w=500&h=750 红影 发表于 2026-3-3 21:08
原来元宵有这么多讲究。这个制作很别致，点击开始讲解后，鼠标不动还能看到对应的文字呢。
欣赏也曾年轻好 ...
谢谢欣赏支持！
文字说明长短不一，这样对付着显示是不理想的。 红影 发表于 2026-3-3 21:14
是在帖子里直接转的么？没看到有语音文件啊
利用的Web 语音服务 API， 直接给文本就可以发声。 老师是越来越厉害了，每页都出来声音了{:4_178:}
页:
[1]
2