情字难舍

醉美水芙蓉 发表于 2022-7-9 09:05

本帖最后由醉美水芙蓉于 2022-7-9 09:05 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 600px; box-shadow: 4px 4px 30px #000; background: #333 url('https://s1.ax1x.com/2022/07/09/jDa6fA.jpg') no-repeat center/cover; overflow: hidden; opacity: .95; position: relative; }
.piece { position: absolute; width: 160px; height: 200px; left: -160px; top: 0; transition: all 4s; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div id="papa">
<div class="playbox">
<p id="geci">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://www.qqmc.com/up/kwlink.php?id=224897010&.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let picAr = [
'https://s1.ax1x.com/2022/07/09/jDaokQ.jpg',
'https://s1.ax1x.com/2022/07/09/jDaOXV.png',
'https://s1.ax1x.com/2022/07/09/jDaL60.jpg',
'https://s1.ax1x.com/2022/07/09/jDaqlq.jpg',
'https://s1.ax1x.com/2022/07/09/jDabpn.png',
'https://s1.ax1x.com/2022/07/09/jDa7fs.jpg',
'https://s1.ax1x.com/2022/07/09/jDaTYj.jpg',
'https://s1.ax1x.com/2022/07/09/jDaTYj.jpg',
'https://s1.ax1x.com/2022/07/09/jDaokQ.jpg',
'https://s1.ax1x.com/2022/07/09/jDa5Tg.jpg'
];
let pNum = picAr.length, slip = 0, last;
let gNum = (x, y) => Math.floor(Math.random() * (y-x+1)) + x;
let lrcAr =[
['0.09','情字难舍(对唱版) - 崔伟立&孙艺琪'],
['1.03','作词：静儿'],
['1.05','作曲：崔伟立'],
['2.07','编曲：冯丹'],
['3.09','笛子：丁晓逵'],
['6.03','伴唱：凌菲'],
['8.05','混音：苏洲'],
['12.08','制作人：崔伟立'],
['16.09','吉他：孙越'],
['18.06','LRC编辑：醉美水芙蓉'],
['20.04','女：'],
['24.02','望着秋风将菊花吹落'],
['29.06','不知不觉心有点难过'],
['35.02','整个仲夏匆匆的度过'],
['40.09','有句话我还没对你说'],
['46.07','每次见你都太过羞涩'],
['52.02','话到嘴边却又不敢说'],
['57.09','傻傻站在无人的角落'],
['63.03','假装自己只是个过客'],
['68.09','男：'],
['69.02','听说今天你就要走了'],
['74.08','我拼命追上你坐的列车'],
['80.03','拉住你衣袖 '],
['83.03','送你花一朵 '],
['86.03','鼓起勇气把爱对你说'],
['91.04','亲爱的请不要离开我'],
['97.04','我看出你也一样的不舍'],
['102.07','未来日子里 '],
['105.09','共相濡以沫'],
['108.07','往后余生都幸福的度过'],
['136.09','女：'],
['137.04','每次见你都太过羞涩'],
['142.06','话到嘴边却又不敢说'],
['148.03','傻傻站在无人的角落'],
['153.06','假装自己只是个过客'],
['159.03','男：'],
['159.05','听说今天你就要走了'],
['165.08','我拼命追上你坐的列车'],
['173.04','送你花一朵 '],
['176.03','鼓起勇气把爱对你说'],
['182.00','亲爱的请不要离开我'],
['187.07','我看出你也一样的不舍'],
['193.02','未来日子里 '],
['196.06','共相濡以沫'],
['199.02','往后余生都幸福的度过'],
['204.05','亲爱的请不要离开我'],
['210.05','我看出你也一样的不舍'],
['215.09','未来日子里 '],
['218.08','共相濡以沫'],
['221.05','往后余生都幸福的度过'],
['225.00','男：'],
['227.04','往后余生都幸福的度过'],
['238.01','谢谢欣赏！ ']

];

Array.from({length:pNum}).forEach((item,key) => {
item = document.createElement('img');
item.className = 'piece';
item.src = picAr;
item.alt = '';
papa.appendChild(item);
});

setTimeout(in_out, 1000);

function in_out() {
let pieces = document.querySelectorAll('.piece');
let key = gNum(0, pieces.length - 1);
if(key == last) key = last + 1;
if(key > pieces.length - 1) key = 0;
if(last >= 0) pieces.style.cssText = 'transform: translate(0,0) rotate(0) scale(1); opacity: 0';
pieces.style.cssText = 'transform: translate(592px, 200px) rotate(1turn) scale(2.5); opacity: 1';
last = key;
setTimeout(in_out, 10000);
}
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 = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script>

红影发表于 2022-7-9 09:43

山水间的美人，制作漂亮，水芙蓉真棒{:4_187:}

樵歌发表于 2022-7-9 09:50

美女都跑去桂林游玩了，快来花潮吧{:4_189:}

四海八荒 发表于 2022-7-9 09:51

樵歌发表于 2022-7-9 09:50
美女都跑去桂林游玩了，快来花潮吧

樵歌多准备鲜花

马黑黑 发表于 2022-7-9 09:56

看看有多难舍？果然，菇凉太漂酿了，有点舍不得{:4_170:}

醉美水芙蓉 发表于 2022-7-9 10:18

红影发表于 2022-7-9 09:43
山水间的美人，制作漂亮，水芙蓉真棒

红影美女上午好！

醉美水芙蓉 发表于 2022-7-9 10:19

樵歌发表于 2022-7-9 09:50
美女都跑去桂林游玩了，快来花潮吧

樵歌上午好！

醉美水芙蓉 发表于 2022-7-9 10:20

四海八荒发表于 2022-7-9 09:51
樵歌多准备鲜花

四海老师上午好！

醉美水芙蓉 发表于 2022-7-9 10:20

马黑黑发表于 2022-7-9 09:56
看看有多难舍？果然，菇凉太漂酿了，有点舍不得

黑黑老师上午好！

樵歌发表于 2022-7-9 10:31

四海八荒发表于 2022-7-9 09:51
樵歌多准备鲜花

前面红影已经备下了不少。{:4_189:}

大猫咪 发表于 2022-7-9 10:33

制作真漂亮！歌美图靓！欣赏水芙蓉美帖，周末快乐！

{:4_204:}{:4_190:}

醉美水芙蓉 发表于 2022-7-9 11:44

大猫咪发表于 2022-7-9 10:33
制作真漂亮！歌美图靓！欣赏水芙蓉美帖，周末快乐！

猫咪中午好！

马黑黑 发表于 2022-7-9 12:13

醉美水芙蓉发表于 2022-7-9 10:20
黑黑老师上午好！

中午好

小辣椒 发表于 2022-7-9 13:20

欣赏水芙蓉的精彩制作{:4_199:}

加林森 发表于 2022-7-9 13:31

水芙蓉制作得真漂亮。我用手机在看。

醉美水芙蓉 发表于 2022-7-9 15:43

小辣椒发表于 2022-7-9 13:20
欣赏水芙蓉的精彩制作

小辣椒美女下午好！

醉美水芙蓉 发表于 2022-7-9 15:43

加林森发表于 2022-7-9 13:31
水芙蓉制作得真漂亮。我用手机在看。

谢谢队长欣赏支持！

红影发表于 2022-7-9 16:51

醉美水芙蓉发表于 2022-7-9 10:18
红影美女上午好！

问好水芙蓉，周六快乐{:4_187:}

加林森 发表于 2022-7-9 16:52

我电脑修复了。上来就看见了。

樵歌发表于 2022-7-10 16:57

醉美水芙蓉发表于 2022-7-9 10:19
樵歌上午好！

芙蓉下午好。{:4_187:}

页: [1]

花潮论坛's Archiver

情字难舍