遇上你是我的缘TO：东篱闲人
<style>.papa { left: -202px; width: 1280px; height: 720px; top: 150px; background: silver; perspective: 1000px; box-shadow: 4px 4px 28px rgba(0,0,0,.85); position: relative; }
.papa>img {position: absolute; width: 256px; box-shadow: inherit; transform-style: preserve-3d; }
.papa>span { width: 50%; height: 50%; transition: all 1s linear; transform-style: preserve-3d; position: absolute; }
.papa>span:hover { box-shadow: 2px 2px 40px rgba(0,0,0,.95); cursor: pointer; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 550px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
.playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
<div class="playbox">
<p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/07/03/ysnswdy.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script language='javascript'>
let papa = document.querySelector('.papa'),
slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let flag = 1, slip = 0, idxar = [];
let imgAr = [ '01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg' ];
let lrcAr = [
['00.00','遇上你是我的缘--歌手：叶凡'],
['3.48','轻轻回首间 白云已走远'],
['9.47','带走我的思念 岁岁又年年'],
['16.92','青山立两旁 白云为伴'],
['24.04','拨动我的心弦 一遍又一遍'],
['32.54','遇上你是我的缘'],
['36.51','芙蓉出水我也难遮面'],
['39.90','跟着你是我的缘'],
['42.08','邀来日月星辰为我辩'],
['46.89','爱上你是我的恋 '],
['49.80','风风雨雨 我们手相牵 '],
['53.56','跟着你是我的缘'],
['56.71',' 天涯海角相伴到永远'],
['61.19','遇上你是我的缘《游龙惊凤》片尾曲'],
['70.04','帖赠：东篱闲人'],
['76.45','LRC编辑：宁静'],
['88.38','轻轻回首间 白云已走远'],
['95.75','带走我的思念 岁岁又年年'],
['102.79','青山立两旁 白云为伴'],
['110.03','拨动我的心弦 一遍又一遍'],
['119.08','遇上你是我的缘'],
['122.43','芙蓉出水我也难遮面'],
['125.90','跟着你是我的缘'],
['129.06','邀来日月星辰为我辩'],
['132.79','爱上你是我的恋'],
['136.03','风风雨雨 我们手相牵 '],
['139.65','跟着你是我的缘'],
['142.79','天涯海角相伴到永远'],
['146.23','遇上你是我的缘'],
['149.91','芙蓉出水我也难遮面'],
['153.36','跟着你是我的缘'],
['156.37','邀来日月星辰为我辩'],
['160.00','爱上你是我的恋'],
['163.48','风风雨雨 我们手相牵 '],
['167.02','跟着你是我的缘'],
['170.15','天涯海角相伴到永远'],
['174.06','遇上你是我的缘'],
['176.90','芙蓉出水我也难遮面'],
['180.81','跟着你是我的缘'],
['183.88','邀来日月星辰为我辩'],
['187.83','爱上你是我的恋 风风雨雨'],
['192.05','我们手相牵 跟着你是我的缘'],
['197.64','天涯海角相伴到永远'],
['201.20','遇上你是我的缘'],
['204.78','芙蓉出水我也难遮面'],
['208.59','跟着你是我的缘'],
['211.51','天涯海角相伴到永远'],
['218.09','谢谢欣赏']
];
let gnum = (min,max) => Math.floor(Math.random()*(max-min+1))+min;
Array.from({length:32}).forEach((item,key) => idxar.push(key));
imgAr.forEach((item,key) => {
item = document.createElement('img');
item.src = 'https://wj.zp68.com/lxx/yunhua/2022/07/03/' + imgAr;
item.style.left = key * 190 + 50 + 'px';
item.style.top = gnum(40, 300) + 'px';
item.style.transform = 'rotateY(' + gnum(5,45) +'deg)';
item.alt = '';
papa.appendChild(item);
});
for(j=0; j<4; j++) {
for(k=0; k < 8; k++) {
let span = document.createElement('span');
span.style.background = 'url("https://wj.zp68.com/lxx/yunhua/2022/07/03/dt.jpg") -' + (k*160) + 'px -' + (j*180) + 'px' ;
span.style.left = k*160 + 'px';
span.style.top = j*180 + 'px';
span.style.width = '160px';
span.style.height ='180px';
span.className = 'masks';
papa.appendChild(span);
}
}
let masks = document.querySelectorAll('.masks');
setTimeout(() => disappear(), 6000);
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
function disappear() {
let idx = gnum(0,idxar.length - 1);
masks].style.opacity = (flag == 1 ? '0' : '1');
if(flag == 1) {
masks].style.transform = 'rotateY(45deg) rotateZ(15deg)';
masks].style.opacity = '0';
} else {
masks].style.transform = 'rotateY(0deg) rotateZ(0deg)';
masks].style.opacity = '1';
}
idxar.splice(idx, 1);
if(idxar.length == 0) {
Array.from({length:32}).forEach((item,key) => idxar.push(key));
flag = -flag;
}
setTimeout(() => disappear(), 2000);
}
</script>
<br><br><br><br><br><br><br><br> @东篱闲人
老头这个你是最拿手的，我借花献佛{:10_402:} 画面自动转换，不用动手就眼睛看看就可以了{:9007:} 知道了，{:10_401:}
你的播放器是一如既往的精彩，看点多多{:10_402:}
东篱老师收礼开心{:10_402:}
手机似乎没法看，改天电脑在看 好听好看啊，静周末愉快{:10_401:} 棉花糖!! 发表于 2022-8-6 19:29
手机似乎没法看，改天电脑在看
糖糖手机可以看，css制作的播放器，要手动点击一下下面的播放器，音乐出来。
画面是自动转换，不用动的，就眼睛看看画面特效。
闲人大哥估计还在路上