月是故乡明 祝：中秋快乐吉祥如意
本帖最后由 东篱闲人 于 2023-9-26 08:20 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1951229">
<br /><br /><style>
#papa{ margin: 10px -400px;width:1400px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height:800px;background: url('https://pic.imgdb.cn/item/65119039c458853aef5f0eb0.jpg') no-repeat center/cover;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute;top:90%;left:85%;font-size:25px;cursor: pointer;color:#fff000;font-family:华文行楷;z-index: 1650;animation: rot 0.4s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 52%;
transform: translate(-50%);
top: 85%;
font:normal 1.6em 华文新魏;
font-weight:200;
color: #000080;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: 4;background: url('https://pic.imgdb.cn/item/65119273c458853aef6169f3.jpg') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
40% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
80% {opacity: 1;transform: scale(4);}
100% {opacity: 0;transform:scale(4);}}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode: lighten; }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.6em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div id="papa">
<divid="img_border" ></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/6466b80a0d2dde577731875f.gif" width="100%" height="100%"></div>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc=" 月是故乡明">" 月是故乡明</div>
<div id="mplayer" ><span id="bf">暂停</span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=188807.mp3" autoplay="" loop=""></audio>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `祝花潮好朋友中秋快乐吉祥如意
祝花潮好朋友中秋快乐吉祥如意
编辑：东篱闲人
走过千山 我历经多少风霜
才能够回到 你的身边
等待的容颜 是否依然没有改变
迎接我一身 仆仆风尘
等待我的人 是否还坐在窗前
带几行清泪 迎接晨昏
是否还依然
在门前挂一盏小灯
牵引我回到你身边
明明是一场空在梦里浮沉
不敢问当年是假是真
流水不管年华任它去
悠悠我心无处寻觅
经过多少年 只有我还在窗前
冷冷的黑夜在我身边
没有一盏灯 没有一个等待的人
只有夜色 依旧如从前
等待我的人 是否还坐在窗前
带几行清泪 迎接晨昏
是否还依然 在门前挂一盏小灯
牵引我回到你身边
明明是一场空在梦里浮沉
不敢问当年是假是真
流水不管年华任它去
悠悠我心无处寻觅
经过多少年 只有我还在窗前
冷冷的黑夜在我身边
没有一盏灯 没有一个等待的人
只有夜色 依旧如从前
明月夜 依旧如从前
明月夜 依旧如从前
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("testImg");
var aud= document.getElementById('aud');
var mplayer=document.getElementById("bf");
mplayer.onclick = function() {
if ( bf.innerText == '暂停') {
image.stop();aud.pause();
bf.innerText="播放";
} else {
image.play();aud.play();
bf.innerText="暂停";
}
};
</script>
</td></tr></table> 月亮又圆又大，美极了{:4_199:} 老头厉害，啥音乐都会找得到，昨天辫子还说找不到月亮的歌曲{:4_170:} 借老头美帖同祝大家中秋节快乐！ 谢谢老头的精美图图，也是祝老头双节快乐！ {:4_199:} 小辣椒 发表于 2023-9-25 22:29
谢谢老头的精美图图，也是祝老头双节快乐！
和师傅一起快乐！{:4_204:} 醉美水芙蓉 发表于 2023-9-25 22:33
欣赏老师佳作！
中秋快乐！{:4_204:} 马黑黑 发表于 2023-9-25 23:25
中秋快乐！{:4_176:} 本帖最后由 梦油 于 2023-9-26 10:02 编辑
借东篱闲人朋友的美帖祝福花潮朋友和家人阖家欢乐、幸福安康！ 借东篱闲人朋友的美帖祝福花潮朋友和家人阖家欢乐、幸福安康！
梦油 发表于 2023-9-26 10:00
借东篱闲人朋友的美帖祝福花潮朋友和家人阖家欢乐、幸福安康！
借用梦油先生的文字了 东篱闲人 发表于 2023-9-26 08:21
中秋快乐！
中秋快乐！ 东篱闲人 发表于 2023-9-26 08:21
中秋快乐！
谢谢！同乐！ 这个贺帖好美啊，给东篱大哥点赞。祝东篱大哥双节快乐，也借帖祝大家双节快乐{:4_187:} 世外桃源 发表于 2023-9-26 12:32
借用梦油先生的文字了
桃园朋友下午好！谢谢你看得起我这个耄耋之年的糟老头。 梦油 发表于 2023-9-26 10:00
借东篱闲人朋友的美帖祝福花潮朋友和家人阖家欢乐、幸福安康！
老梦中秋快乐！{:4_191:} 世外桃源 发表于 2023-9-26 12:32
借东篱闲人朋友的美帖祝福花潮朋友和家人阖家欢乐、幸福安康！
中秋快乐！{:4_176:} 红影 发表于 2023-9-26 14:23
这个贺帖好美啊，给东篱大哥点赞。祝东篱大哥双节快乐，也借帖祝大家双节快乐
中秋快乐！多喝水。。。{:4_180:}