|
|
楼主 |
发表于 2026-5-3 07:09:57
|
显示全部楼层
无缝左移+诗词3组
<style>
:root {--w:1800px;--h:820px;}
#oBlk {
margin-left:50% ; left:calc(-0.5 * var(--w));
margin-top:110px;
width: var(--w);
height: var(--h);
box-shadow: 3px 3px 10px #000;
overflow: hidden;
position: absolute;
}
#oBlk::before,
#oBlk::after {
position: absolute;
content: '';
left: var(--curX0);
top: 0px;
width: 100%;
height: 100%;
background: url('https://cccimg.com/view.php/9f61d3318dc10907b56e40d3f51e5d45.jpg') no-repeat center / cover;
}
#oBlk::after {
left: var(--curX1);
transform: scaleX(-1);
}
/* 新增文字层样式 */
#poemText {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-size: 24px;
text-align: center;
width: 80%;
line-height: 1.6;
font-family: 'Microsoft YaHei', sans-serif;
transition: opacity 0.5s ease;
}
/* 按钮样式 */
#poemButton {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 20;
background-color: rgba(0,0,0,0.6);
color: white;
border: 2px solid white;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
}
#poemButton:hover {
background-color: rgba(255,255,255,0.8);
color: black;
}
#comp {height:calc(var(--h) + 100px);}
</style>
<div id="oBlk">
<!-- 新增文字层 -->
<div id="poemText"></div>
<!-- 新增切换按钮 -->
<button id="poemButton">切换下一段</button>
</div>
<div id="comp"></div>
<script>
{
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;5 9=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))
}
// 诗词库 - 现在包含全部四段诗
const poems = [
{
title: "《书香醉》",
content: [
"(一）",
"人间至味是书香 何须美酒助疏狂",
"芸窗静对琴韵悠 芸帙轻翻一瓣香 ",
"青史浮沉观兴废 骚辞跌宕感兴亡",
"浑然不觉东方白 犹自沉迷韵味长"
]
},
{
title: "《二》",
content: [
"俗尘扰扰皆过耳  唯有书香最断肠",
"墨痕染透浮云暗  诗思萦回九曲肠",
"墨渍犹含秦代月  芸香暗度怀汪洋",
"一榻诗书消永日  赞君甘作蠹鱼忙"
]
},
{
title: "《三》",
content: [
"芸编展处接羲皇 俗韵销沉意自长",
"残篇似见唐宫燕 旧简如闻汉殿珰 ",
"晤对千贤忘岁序 翻残几帙悟沧桑 ",
"何须美酒邀明月 满案书香已自陶 "
]
},
{
title: "《四》",
content: [
"芸窗久对忘昏晓 一卷晴光破寂寥",
"书中自有千秋业 上下五千代代骄 ",
"醉中不辨沉浮世 读罢方知兴废潮 ",
"纵使金樽空对月 书香绕案胜醇醪 "
]
}
];
// 当前诗词索引
let currentPoemIndex = 0;
const poemText = document.getElementById('poemText');
const poemButton = document.getElementById('poemButton');
// 初始化显示第一首诗
updatePoemDisplay();
// 切换诗词函数
function changePoem() {
// 淡出效果
poemText.style.opacity = "0";
setTimeout(() => {
// 更新诗词索引
currentPoemIndex = (currentPoemIndex + 1) % poems.length;
updatePoemDisplay();
// 淡入效果
poemText.style.opacity = "1";
}, 500); // 等待淡出完成
}
// 更新诗词显示
function updatePoemDisplay() {
const poem = poems[currentPoemIndex];
// 修改了这里，添加了font-size:24px保持与正文统一
let poemHTML = `<p class="title" style="font-size:24px">${poem.title}</p>`;
poem.content.forEach(line => {
poemHTML += `<p>${line}</p>`;
});
poemText.innerHTML = poemHTML;
}
// 绑定按钮事件
poemButton.addEventListener('click', changePoem);
</script>
<video loop autoplay src="https://cccimg.com/view.php/20a5a712a4f987fc47f0c34c9efb3f8fF.mp3"></video>
|
|
发表于 2025-9-21 20:23:44
