陋室铭（第二版）
本帖最后由 杨帆 于 2025-11-16 17:27 编辑 <br /><br /><!DOCTYPE html><meta charset="utf-8">
<title>陋室铭</title>
<style>
#mama { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: #333 url('https://pic1.imgdb.cn/item/6873de3b58cb8da5c8a84eea.jpg') no-repeat center/cover; box-shadow: 0 0 8px rgba(0, 0, 0, .65); overflow: hidden; user-select: none; z-index: 1; position: relative;perspective: 800px; transition: transform 1s; }
#btnFs { bottom: 20px; right: 20px; color: white; }
#video1, #video2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; pointer-events: none; opacity: .9; mix-blend-mode: screen; mask: radial-gradient(transparent 10%, red); -webkit-mask: radial-gradient(transparent 10%, red); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
#layer { position: absolute; width: 45%; height: 1em; filter: drop-shadow(-200px 100px 20px black); left: 3%; top: 55%; z-index: 1; }
#player { position: absolute; left: -1000px; }
#ppn { position: absolute; width: 133px; height: 162px; opacity: 1; z-index: 1; background: url('https://cccimg.com/view.php/0ace9541024b1e88f9d4182c5aeda50e.gif') no-repeat center/cover; cursor: pointer; top: 55%; left: 54%; transform-style: preserve-3d;transform:translateZ(-200px)
}
#ppcn { position: absolute; width: 133px; height: 162px; opacity: 0; z-index: 1; background: url('https://cccimg.com/view.php/e4526e0e1d463b5e481b4a41148b2aed.gif') no-repeat center/cover; cursor: pointer; top: 55%; left: 54%;transform-style: preserve-3d; transform: translateZ(-200px)
}
</style>
<div id="mama">
<div id="player"></div>
<video id="video1" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/14/18/28/59/video6372186b58c54.mp4" autoplay loop muted></video>
<video id="video2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/55/video63662a4394bff.mp4" autoplay loop muted></video>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/05/00/video6364ffecb011e.mp4" autoplay loop muted></video>
<img src="https://cccimg.com/view.php/9dcb5437a7e8ca3436cb1ff15a4cf462.png"
style="width: 70%; height: 70%; position: absolute; left: 15%; top: -5%; opacity: .99; z-index: 1;filter:invert(.9) drop-shadow(0 0 80px Gold);" alt="" />
<div id="layer"></div><div id="ppn" title="播放/暂停"></div><div id="ppcn" title="播放/暂停"></div>
</div>
<textarea style="visibility: hidden;" id="lrcContent">
演唱 - 黄绮珊 (Susan Huang)
词：（唐）刘禹锡
曲：贾轶男
编曲：贾轶男
音乐总监：刘卓
乐团：V Band
键盘：孙梦迪/李海郡
键盘/PGM：尹岳洋
木吉他：金天
电吉他：崔万平
贝斯：李九君
鼓手：卢炜
打击乐：刘效松
和音：张炜/刘芳/关冰效/曾嵘
混音：周天澈 混音团队
山不在高 有仙则名
水不在深 有龙则灵
斯是陋室 惟吾德馨
山不在高 有仙则名
水不在深 有龙则灵
斯是陋室 惟吾德馨
苔痕上阶绿 草色入帘青
谈笑有鸿儒 往来无白丁
可以调素琴 阅金经
无丝竹之乱耳 无案牍之劳形
南阳诸葛庐 西蜀子云亭
孔子云 何陋之有
山不在高 有仙则名
水不在深 有龙则灵
斯是陋室 惟吾德馨
</textarea>
<script type="text/javascript">
var lrcPlayer = function () {
return this.init.apply(this, arguments);
};
lrcPlayer.prototype = {
constructor: lrcPlayer,
init: function (opts) {
this.lrcVec = new Array();
this.lyricTxtObj = document.getElementById(opts.lrcTxtID);
lyricTxt = this.lyricTxtObj.innerHTML;
this.showLrcObj = document.getElementById(opts.lrcShowID);
this.showLrcObj.style.fontSize = opts.gczh ? opts.gczh : '1em';
this.showLrcObj.style.fontFamily = opts.gczt ? opts.gczt : '隶书';
this.showLrcObj.style.fontWeight = opts.gcct ? 'bold' : 'normal';
this.showLrcObj.style.textAlign = opts.dqfs ? opts.dqfs : 'center';
this.showLrcObj.style.color = opts.gcys1 ? opts.gcys1 : 'gray';
gcys = opts.gcys ? opts.gcys : 'red';
sMode = opts.showMode ? opts.showMode : 0;
this.sLine = opts.gchs ? opts.gchs : 1;
this.isLoop = opts.playLoop ? opts.playLoop : false;
this.handleLrc(lyricTxt);
this.prepareShow(sMode, opts.shys);
this.genPlayer(opts.audioURL);
const ppn = document.getElementById('ppn');
const ppcn = document.getElementById('ppcn');
ppn.onclick = () => this.togglePlayback();
ppcn.onclick = () => this.togglePlayback();
},
prepareShow: function (sMode, shys) {
for (let k = 0; k < this.sLine; k++) {
let sItem = document.createElement("span");
sItem.style.display = "block";
sItem.style.marginBottom = '4px';
// 判断是否为中间行
if (this.sLine % 2 === 1 && k === Math.floor(this.sLine / 2)) {
sItem.style.color = gcys;
sItem.style.fontSize = '120%';
if (shys) {
shadowStr = '0 -1px 0px ' + shys + ',';
shadowStr += '-1px 0 0px ' + shys + ',';
shadowStr += '1px 0 0px ' + shys + ',';
shadowStr += '0 1px 0px ' + shys;
sItem.style.textShadow = shadowStr;
}
}
if (sMode != 0) sItem.style.textAlign = "left";
this.showLrcObj.appendChild(sItem);
}
if (sMode != 0) {
this.showLrcObj.style.writingMode = 'tb-rl';
this.showLrcObj.style.msWritingMode = 'tb-rl';
this.showLrcObj.style.mozWritingMode = 'vertical-rl';
this.showLrcObj.style.webkitWritingMode = 'vertical-rl';
}
},
handleLrc: function (lyricTxt) {
var lyriclist = lyricTxt.split(/\r|\n|\r\n/);
for (let n = 0; n < lyriclist.length; n++) {
let chkTime = lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]/g);
if (chkTime) {
let tIdx = lyriclist.lastIndexOf(']');
if (tIdx > 0) lrcTxt = lyriclist.substr(tIdx + 1);
for (let m = 0; m < chkTime.length; m++) {
let ta = chkTime.substr(1).replace(']', '').split(/:|\./);
let _t = parseFloat(parseInt(ta, 10) * 60 + parseInt(ta, 10) + '.' + ta, 10);
if (this.lrcVec.length == 0 && _t != 0) {
this.lrcVec.push();
}
this.lrcVec.push();
}
}
}
this.lrcVec.sort(function (a, b) { return (a - b) });
},
genPlayer: function (mUrl) {
this.mObj = document.createElement("audio");
this.mObj.loop = false;
this.mObj.muted = false;
this.mObj.src = mUrl;
this.mObj.controls = true;
this.mObj.style.opacity = 0.3;
this.showLrcObj.appendChild(this.mObj);
this.idx = 0;
this.mObj.onended = () => {
this.idx = 0;
this.lyricTxtObj.innerHTML = '';
if (this.isLoop) {
this.mObj.play();
const videos = document.querySelectorAll('#mama video');
videos.forEach(video => video.play());
} else {
this.mObj.controls = true;
}
};
this.mObj.onplaying = () => {
this.mObj.controls = false;
const videos = document.querySelectorAll('#mama video');
videos.forEach(video => video.play());
};
this.mObj.onerror = () => {
console.log("audio wrong, remove play start event");
this.showLrcObj.style.display = 'none';
this.showLrcObj.removeChild(this);
};
this.mObj.ontimeupdate = () => {
if (this.idx < this.lrcVec.length) {
if (this.mObj.currentTime > this.lrcVec) {
let _idx = this.idx;
let _spans = this.showLrcObj.getElementsByTagName('span');
for (let k = 0; k < this.sLine; k++) {
_spans.style.color = opts.gcys1 ? opts.gcys1 : 'gray';
_spans.style.fontSize = '100%';
_spans.style.textShadow = '';
}
for (let k = 0; k < this.sLine; k++) {
let displayIdx = _idx + k - Math.floor(this.sLine / 2);
if (displayIdx >= 0 && displayIdx < this.lrcVec.length) {
_spans.innerHTML = this.lrcVec;
} else {
_spans.innerHTML = "";
}
}
if (this.sLine % 2 === 1) {
let middleSpan = _spans;
middleSpan.style.color = gcys;
middleSpan.style.fontSize = '120%';
if (opts.shys) {
shadowStr = '0 -1px 0px ' + opts.shys + ',';
shadowStr += '-1px 0 0px ' + opts.shys + ',';
shadowStr += '1px 0 0px ' + opts.shys + ',';
shadowStr += '0 1px 0px ' + opts.shys;
middleSpan.style.textShadow = shadowStr;
}
}
this.idx++;
}
}
};
try {
this.mObj.play();
const videos = document.querySelectorAll('#mama video');
videos.forEach(video => video.play());
} catch (err) {
console.log(err.message);
}
},
togglePlayback: function () {
const videos = document.querySelectorAll('#mama video');
const ppn = document.getElementById('ppn');
const ppcn = document.getElementById('ppcn');
if (this.mObj.paused) {
this.mObj.play();
videos.forEach(video => video.play());
ppcn.style.opacity = '0';
ppn.style.opacity = '1';
} else {
this.mObj.pause();
videos.forEach(video => video.pause());
ppcn.style.opacity = '1';
ppn.style.opacity = '0';
}
},
stopMusic: function () {
this.mObj.pause();
this.mObj.controls = false;
this.mObj = null;
const videos = document.querySelectorAll('#mama video');
videos.forEach(video => video.pause());
}
};
var opts = {
lrcTxtID: 'lrcContent', lrcShowID: "layer",
audioURL: "https://cccimg.com/view.php/fe512b5209a0323c0e67c4e79b9495b0.mp3",
gczh: '35px', gczt: '隶书', gcys: '#FF1493', gcys1: '#3CB371', shys: 'gold', gcct: true, dqfs: 'center', showMode: 0, playLoop: true, gchs: 5,
};
var km = new lrcPlayer(opts);
</script>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(mama, player);
</script>
这帖子能看到，背景图，配上透明陋室铭文字，桌子上的花瓶能一键暂停。移动的歌词，非常赞！{:4_187:} 梦江南 发表于 2025-7-15 16:31
这帖子能看到，背景图，配上透明陋室铭文字，桌子上的花瓶能一键暂停。移动的歌词，非常赞！
谢谢江南鼓励！这个可看到，其它也应该能看到呀{:4_171:} 原来那个花瓶是播放器按钮啊，真好，可以一键全控呢。
制作很漂亮，欣赏杨帆好帖{:4_199:} 红影 发表于 2025-7-15 17:07
原来那个花瓶是播放器按钮啊，真好，可以一键全控呢。
制作很漂亮，欣赏杨帆好帖
谢谢影子鼓励，祝开心天天{:4_204:} 非常比特佛！{:4_204:} 小文 发表于 2025-7-15 19:01
非常比特佛！
谢谢小文朋友鼓励，祝开心{:4_190:} 杨帆 发表于 2025-7-15 17:09
谢谢影子鼓励，祝开心天天
这个用了好几个视频，效果很不错，怪不得说是优化版呢{:4_199:} 红影 发表于 2025-7-15 20:11
这个用了好几个视频，效果很不错，怪不得说是优化版呢
优化版主要取与初版区分之意，也作了一些改进与尝试{:4_173:} 杨帆 发表于 2025-7-15 20:22
优化版主要取与初版区分之意，也作了一些改进与尝试
看你签名里说，学习是一个人最美的姿态，你呈现的就是最美的姿态呢{:4_187:} 红影 发表于 2025-7-15 20:49
看你签名里说，学习是一个人最美的姿态，你呈现的就是最美的姿态呢
呵呵，谢谢影子鼓励，共勉{:4_190:} 杨帆 发表于 2025-7-16 20:41
呵呵，谢谢影子鼓励，共勉
不客气啊，问好杨帆{:4_187:}
页:
[1]