本帖最后由 加林森 于 2022-9-15 19:05 编辑 <br /><br />红影 发表于 2022-7-18 16:54
嗯嗯，漂亮的
谢谢！
<style>#papa{left:-214px;width:1024px;height:1024px;background:tan url('https://pic.imgdb.cn/item/6322dbb616f2c2beb1f0978a.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:20px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}#mplayer:hover <div id=papa><div id=lrc>lrc</div><div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div><script>let lrcAr = [['00.00','酒馆儿-姜姜'],['3.03','老板账本不常记'],['5.65','故人故景不常忆'],['8.49','客来客散一场戏'],['11.20','台下台上并无异'],['25.75','南边儿开了家小酒馆儿'],['28.42','酒馆儿里上菜用大碗儿'],['31.37','大碗儿大碟儿赚的慢'],['34.12','朋友说老板死心眼儿'],['37.03','老板左腿有残疾'],['39.79','原本是个读书的'],['42.73','落第落难跑了妻'],['45.40','去年漂泊到此地'],['48.68','二十九年世间冷暖历'],['54.17','三生幸得此月圆缺意'],['59.66','啊~月下情难寄'],['62.80','放盐要适量 火候要适当'],['68.46','青天老爷勤孝敬 来年莫相忘'],['74.22','吃软莫欺软 吃硬莫嘴硬'],['79.75','温酒一盏 对影叙炎凉'],['97.12','南边儿开了家小酒馆儿'],['99.89','酒馆儿里上菜用大碗儿'],['102.67','大碗儿大碟儿赚的慢'],['105.63','邻居说老板缺心眼儿'],['108.57','老板账本不常记'],['111.32','故人故景不常忆'],['114.17','客来客散一场戏'],['116.89','台下台上并无异'],['119.91','二十九年世间冷暖历'],['125.60','三生幸得此月圆缺意'],['131.15','啊~月下情何寄'],['134.54','放盐要适量 火候要适当'],['139.77','青天大老爷勤孝敬 来年莫相忘'],['145.57','吃软莫欺软 吃硬莫嘴硬'],['151.21','温酒一盏 对饮叙炎凉'],['157.30','放盐要适量 火候要适当'],['162.75','青天老爷勤孝敬 这道义杯中藏'],['168.50','清酒穿浊肠 老藤攀新墙'],['174.10','月下影成双']];
let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=1900003217.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}</script>
队长这个制作太漂亮了
绿叶清舟 发表于 2022-7-18 17:29
队长这个制作太漂亮了
还行吧。
加林森 发表于 2022-7-18 17:35
还行吧。
是太行了
绿叶清舟 发表于 2022-7-18 17:51
是太行了
那就不客气了。{:4_189:}
加林森 发表于 2022-7-18 17:03
漂亮吧。
也只能远观了{:4_189:}
樵歌 发表于 2022-7-18 20:10
也只能远观了
哈哈。明天给你带来新的惊喜。
@小辣椒
加林森 发表于 2022-7-18 17:57
那就不客气了。
再客气要胖啦{:4_189:}
{:4_172:}
加林森 发表于 2022-7-17 22:22
@马黑黑 @小辣椒
队长来了{:4_187:}
加林森 发表于 2022-7-17 22:40
是啊。我修改了自己制作的。漂亮不？
队长做的非常好{:4_178:}
小辣椒 发表于 2022-7-18 20:49
队长来了
好的好的。
小辣椒 发表于 2022-7-18 20:49
队长做的非常好
谢谢小辣椒。就是动态的我忘记怎么制作了。{:5_102:}
加林森 发表于 2022-7-18 20:13
@小辣椒
队长再接再厉，加油~~~看看黑黑的点评，非常的有用，你会越来越好的
加林森 发表于 2022-7-18 20:51
谢谢小辣椒。就是动态的我忘记怎么制作了。
队长，动图你不急的，估计你也是一下子做不了，还是看看黑黑的点评，对你非常有用
小辣椒 发表于 2022-7-18 20:53
队长再接再厉，加油~~~看看黑黑的点评，非常的有用，你会越来越好的
我看了的，理解颇深的。以后走自己的制作之路了。谢谢你们！{:4_171:}
小辣椒 发表于 2022-7-18 20:54
队长，动图你不急的，估计你也是一下子做不了，还是看看黑黑的点评，对你非常有用
谢谢了！{:4_190:}
加林森 发表于 2022-7-18 20:12
哈哈。明天给你带来新的惊喜。
还是早点告诉呗{:4_169:}
樵歌 发表于 2022-7-19 21:35
还是早点告诉呗
我每天给你应该惊喜就行了。明天的已经制作好了。{:4_189:}