越剧——状元打更
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1906825">
<style>
#papa {
margin: 150px-340px;
place-items: center;
width: 1283px;
height: 731px;
background:#000000 ; border-radius: 12px;display: grid;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#tup{ display: grid;
width: 100%;
height: 100%;
background:url('')center/cover no-repeat;
left: 0%; top:0%;
transform: rotateY(180deg);
position:absolute;
z-index: 1;
}
#tup1{width: 100%;display: grid;
mix-blend-mode:lighten;
height: 100%;
left: 0%; top:0%;
position:absolute;
z-index: 2;
opacity: 1;
}
#tup2{width: 12px;display: grid;
height: 20px;
left: 40%; top:26%;
position:absolute;transform: rotateY(180deg);
z-index: 3;
opacity: 1;
}
#tup3{width: 12px;display: grid;
height: 20px; mix-blend-mode: difference;
left: 60%; top:35%;-webkit-mask-image: radial-gradient(black 30% ,transparent 80%);
position:absolute;
z-index: 5;
opacity: 1;
}
#tup4{width: 12px;display: grid;
height: 20px;
left: 30%; top:25%;
position:absolute;
z-index: 3;
opacity: 1;
}
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}
@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 20%; top:10%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.8em 隶书;color:#007811; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa">
<div id="tup"></div>
<div id="tup1"><img id="pp"src="https://pic.imgdb.cn/item/6494e6661ddac507ccdd0950.gif" width="100%" height="100%"></div>
<div id="tup2"><img id="pp0"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="tup3"><img id="pp1"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="tup4"><img id="pp2"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="lrc" data-lrc="状元打更">状元打更</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://www.joy127.com/url/105484.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✿',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 0, offset = 0;
let geci = `执更锣
心头苦
沈文素
面目无
只为运粮
期限误
一言顶撞
元帅怒
军令如山
凶如虎
竟要搬下
我好头颅
若不是
少将军
讨情求告
险些儿今朝
命呜呼
四十棍打得
皮肉破
一瘸一拐
好苦楚
打了骂了
不算数
还给我一面
破铜锣
哎
笔杆不拿
拿铜锣
状元不做
做更夫
悔当初
习文不习武
如今有苦
向谁诉
元帅啊
我与你
往日无冤
近无仇
啊呀为什么
苦苦逼我
沈文素
`;
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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); left: 43%;top:80%; ',
player_css: '--ww: 620px; bottom: 7%; left: 22%;',
btn_txt: '✿',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://xlaj.cn/assets/file/zp/20230603223019.mp3 ';
}
})();
</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 = ''; image0.style.opacity = '';image1.style.opacity = '';image2.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("pp"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
image2 = document.getElementById("pp2"),
button = document.getElementById("mplayer");
if (image1 &&image0 &&image && button) {
button.onclick = function() {
if (this.value == '') {
image.play(); image0.play(); image1.play(); image2.play();
this.value = '.';
} else {
image.stop(); image0.stop();image1.stop(); image2.stop();
this.value = '';
}
};
}
</script>
</td></tr></table> 这么大个唱机转盘啊。暂停能让所有的动态停止呢。欣赏有声有色老师的制作{:4_187:} 好听的唱段，感谢有声有色老师制作的好帖{:4_187:} 红影 发表于 2023-6-23 09:49
好听的唱段，感谢有声有色老师制作的好帖
谢谢 ，今天还在放假吧 问好老师，欣赏精彩佳作，谢谢分享！{:4_187:} 有声有色有代码基础的，看看就会了{:4_199:} 欣赏有声有色精彩的分享{:4_187:} 状元打更，研究生打酱油 梦缘 发表于 2023-6-23 17:36
问好老师，欣赏精彩佳作，谢谢分享！
谢谢支持 小辣椒 发表于 2023-6-23 18:31
有声有色有代码基础的，看看就会了
辣椒老师你说的好，我只能TO，如在代码里更换颜色，加一张图等，就不知道怎么办了。 马黑黑 发表于 2023-6-23 19:20
状元打更，研究生打酱油
哈哈，黑黑老师真幽默 有声有色 发表于 2023-6-24 07:17
哈哈，黑黑老师真幽默
{:4_170:} 有声有色 发表于 2023-6-23 09:58
谢谢 ，今天还在放假吧
是啊，放假外出了，刚回来{:4_173:}
页:
[1]