唐代部分诗人一览-黄国伦配歌

万顷湖 发表于 2026-8-16 18:06

<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_284168"><i class="pstatus">唐代部分诗人一览<br>-花潮论坛-
<br /><br /><style>
.lrcShow{font:bold 3em serif;position:absolute;width:80%;height:2em;bottom:5px;left:20%;color:hsl(60,100%,40%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:linear-gra**nt(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#oBlk {
width:800px;height:1150px;margin:40px auto;
display: grid;background-color:skyblue;
place-items:center;position:relative;
grid-template-rows:1100px, 80px;
grid-template-columns:100%;
box-shadow:3px 3px 8px darkgray;
overflow:hidden;border-radius:24px;
font-size:12px;padding:10px;
}

#img_area {
width:100%;height:100%;
display: grid;place-items:center;
grid-template-rows:repeat(5, 1fr);
grid-template-columns:repeat(5, 1fr);
}
#img_area img {overflow:hidden; border-radius:5%;}

#img_area .roundGrid {
width:144px;height:192px;cursor:pointer;
margin-bottom:8px;
}
#img_area .roundGrid img{
width:100%;
}
#img_area .roundGrid span{
display:none;
}
#img_area .midGrid {
width:450px; height:600px;
grid-area: 2 / 2 / span 3 / span 3 ;
/***************************************
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 6;
***************************************/
display:grid;
place-items:center;
}
#img_area .midGrid img {
width:100%;
}
#lrc_area {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
display: grid;place-items:center;
}
.lrcShow{
font-size:36px;bottom:0px;font-family:楷体;
}
</style>

<div id="oBlk">
<div id="img_area"></div>
<div id="lrc_area"><div class="lrcShow" data-lrc="点击启动播放"></div></div>
</div>

<script>
{
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}

let pics = [
"https://free.picui.cn/free/2026/08/16/6a8170cf4f59e.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81723fed929.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81729ae7815.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8173ea67e18.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8176508de5d.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81778b64a10.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a817842ac447.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81859f9ca56.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8185d64fb8b.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8185fa5e11e.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81862252b24.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a81866e35b7e.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8188021896f.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a818831e8bcc.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a8189a0b43b3.jpg" ,
"https://free.picui.cn/free/2026/08/16/6a818a48723e3.jpg"
];

let oBlk = document.querySelector('#img_area');
let divObj = document.createElement('div');
let imgObj = document.createElement('img');

divObj.className = 'midGrid';

imgObj.src = pics;
imgObj.alt = '';

divObj.appendChild(imgObj);
oBlk.appendChild(divObj);
let mIdx = 0;

for(n = 0; n < pics.length; n++) {
let divObj = document.createElement('div');
let imgObj = document.createElement('img');

divObj.className = 'roundGrid';

imgObj.src = pics;
imgObj.dataset.idx = n;
imgObj.alt = '';

divObj.appendChild(imgObj);
oBlk.appendChild(divObj);
}

let divObjs = oBlk.querySelectorAll('.roundGrid');

for(n = 0; n < divObjs.length; n++) {
divObjs.onclick = function(e) {
oBlk.querySelector('.midGrid img').src = e.target.src;
mIdx = e.target.dataset.idx;
console.log(mIdx);
}
}
let pic_loop = () => {
mIdx++;
mIdx >= divObjs.length? mIdx = 0 : mIdx;
oBlk.querySelector('.midGrid img').src = divObjs.querySelector('img').src;
}
setInterval(pic_loop, 10000);
var lrctxt = `唐诗 - 黄国伦\n
词：黄国伦\n
曲：黄国伦\n
独自一个人走在古老西安的大街\n
望着李白醉后对影成三人的明月\n
这是杜甫春雨润物细无声的季节\n
我突然掉进大唐诗梦的世界\n
看念天地之悠悠一人独钓寒江雪\n
怜惜日暮依修竹曾经沧海难为水\n
何当共剪西窗烛同游春江花月夜\n
我欲会当凌绝顶飞上星河欲曙天\n
读一卷唐诗谈一场爱恋\n
念一段平仄品人生喜悲\n
吟一首诗篇游碧海蓝天\n
推一字无怨敲一世无悔的情缘\n
劝君更进一杯酒家家扶得醉人归\n
听见月出惊山鸟破烟来入画屏飞\n
堆金积帛欲如何越国亡来又是谁\n
我祈愿大庇天下寒士俱欢颜\n
读一卷唐诗谈一场爱恋\n
念一段平仄品人生喜悲\n
吟一首诗篇游碧海蓝天\n
推一字无怨敲一世无悔的情缘\n
唐诗是柔情是豪气是风云是际会\n
一直到永远\n
只要敢去爱敢做梦赶追寻敢狂狷\n
我也是诗仙\n
`;
//
var opts = {
lrcTxt:lrctxt,
audioURL:"https://www.joy127.com/url/157645.mp3",
}
new lrcPlayerY(opts);
}
</script>

点击小图，中间显示大图<br>-花潮论坛-</td></tr></table>

梦江南 发表于 2026-8-16 18:33

歌词出来了，很漂亮的特效。上面的人物图还没出来。

梦油发表于 2026-8-16 20:25

字幕设计很有新意啊！问好万顷湖朋友。

万顷湖 发表于 2026-8-16 21:02

梦江南发表于 2026-8-16 18:33
歌词出来了，很漂亮的特效。上面的人物图还没出来。

多图要过下载和缓冲关。画虎不成反类犬。谢谢关注和鼓励。

万顷湖 发表于 2026-8-16 21:03

梦油发表于 2026-8-16 20:25
字幕设计很有新意啊！问好万顷湖朋友。

画虎不成反类犬。谢谢关注和鼓励。

梦油发表于 2026-8-16 21:04

万顷湖发表于 2026-8-16 21:03
画虎不成反类犬。谢谢关注和鼓励。

万顷湖朋友别客气

红影发表于 2026-8-17 14:08

这制作真漂亮，不去点击图图也会自动轮转呢。歌词同步也很别致。
欣赏万顷湖好帖{:4_199:}

万顷湖 发表于 2026-8-17 20:38

红影发表于 2026-8-17 14:08
这制作真漂亮，不去点击图图也会自动轮转呢。歌词同步也很别致。
欣赏万顷湖好帖

受到行家鼓励，喜不自胜，万分感谢。

页: [1]

花潮论坛's Archiver

唐代部分诗人一览-黄国伦配歌