绝世舞姬
<style>#papa { left: -214px; width: 1024px; height: 600px; background: #ccc url('https://638183.freep.cn/638183/Pic/38/js.jpg') no-repeat center/cover; position: relative; }
.piece { position: absolute; left: 160px; bottom: 100px; width: 160px; height: 200px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom; transition: all 1s; }
.piece:hover { box-shadow: 2px 2px 34px #fff; cursor: pointer; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: snow; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.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 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://music.163.com/song/media/outer/url?id=1451145776.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let flags = [...Array(6)].map((x,y) => y*0);
let zIdx = 0, slip = 0;
let picAr = [
'https://638183.freep.cn/638183/Pic/38/js1.jpg',
'https://638183.freep.cn/638183/Pic/38/js2.jpg',
'https://638183.freep.cn/638183/Pic/38/js3.jpg',
'https://638183.freep.cn/638183/Pic/38/js4.jpg',
'https://638183.freep.cn/638183/Pic/38/js5.jpg',
'https://638183.freep.cn/638183/Pic/38/js6.jpg',
];
let lrcAr = [
['0.00','作曲 : 房雪娇'],
['0.66','作词 : 清玄小仙'],
['1.97','Rap编写 Rap Arrangement：顾雄'],
['7.57','编曲 Arranger：甘虎'],
['13.27','戚琦（念白）：'],
['13.55','绝世舞姬'],
['15.57','天下先'],
['23.05','张晓涵：'],
['23.28','烽烟燃起 乱风华'],
['26.38','胭脂落泪 染红霞'],
['29.27','眉目如画 宜其室家'],
['31.74','说陪我浪迹天涯 都作假'],
['34.38','心死就在 那一刹'],
['37.00','世间安得 双全法'],
['39.60','眸中无他 便无冬夏'],
['42.41','君临天下'],
['43.12','也只能道一声 寡'],
['44.99','若我一舞断杀伐'],
['47.74','兵临城下万箭发'],
['50.34','若我一舞定天下'],
['52.77','在你方寸棋盘倒也罢'],
['58.90','戚琦（戏腔）：'],
['59.14','啊~~~'],
['60.85','美人舞如莲花旋'],
['63.52','世人见之惊且叹'],
['66.18','一曲终了与君断'],
['68.81','绝世舞姬天下先'],
['71.65','美人舞如清泉涧'],
['74.10','世人见之惊且叹'],
['76.87','剪不断的理还乱'],
['79.47','绝世舞姬天下先'],
['92.37','张晓涵：'],
['92.95','烽烟燃起 乱风华'],
['95.70','胭脂落泪 染红霞'],
['98.31','眉目如画 宜其室家'],
['100.95','说陪我浪迹天涯 都作假'],
['103.90','若我一舞断杀伐'],
['106.74','兵临城下万箭发'],
['108.96','若我一舞定天下'],
['111.42','在你方寸棋盘'],
['112.95','倒也罢'],
['116.65','戚琦（戏腔）：'],
['116.89','美人舞如莲花旋'],
['119.45','世人见之惊且叹'],
['122.22','一曲终了与君断'],
['124.67','绝世舞姬天下先'],
['127.64','美人舞如清泉涧'],
['130.03','世人见之惊且叹'],
['132.88','剪不断的理还乱'],
['135.42','绝世舞姬天下先'],
['138.41','张晓涵（Rap）:'],
['138.55','烽烟 燃起了风华'],
['139.38','胭脂 染泪染红霞'],
['140.56','眉目如画 宜其室家'],
['141.85','我陪你浪迹天涯'],
['143.16','心死在一刹那'],
['144.53','世间安得双全法'],
['145.76','眸中无他'],
['146.80','君临天下'],
['147.35','只能道一声寡'],
['148.77','张晓涵（念白）：'],
['148.97','血溅'],
['149.30','张晓涵：'],
['149.50','尸骸踏燃起风沙'],
['151.77','兵临城下万箭发'],
['154.17','三千鸦杀 它终是虚话'],
['156.50','绝世舞姬'],
['157.52','此生已了无牵挂'],
['159.30','戚琦（戏腔）：'],
['159.50','美人舞如莲花旋'],
['162.11','世人见之惊且叹'],
['164.77','一曲终了与君断'],
['167.29','绝世舞姬天下先'],
['170.26','美人舞如清泉涧'],
['172.75','世人见之惊且叹'],
['175.50','剪不断的理还乱'],
['177.91','绝世舞姬天下先']
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length: 6}).forEach((item,key) => {
item = document.createElement('img');
item.className = 'piece';
item.src = picAr;
item.style.zIndex = key + 1;
item.style.transform = 'rotate(' + (key*30-75) + 'deg)';
papa.appendChild(item);
});
let img = document.querySelectorAll('.piece');
img.forEach((item,key) => {
item.onclick = () => {
flag = flags;
if(flag == 0) {
item.style.zIndex = zIdx;
item.style.transform = 'translate(525px, 50px) scale(2.5)';
flags = 1;
zIdx ++;
} else {
item.style.zIndex = key + 1;
item.style.transform = 'translate(0,0) rotate(' + (key*30-75) + 'deg)';
flags = 0;
zIdx --;
}
}
});
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>
先抢个沙发{:4_335:} 这些扇形摆放的小图真好，能变成正放的大图，还能再收回到扇形小图{:4_187:} 红影 发表于 2022-7-7 19:31
这些扇形摆放的小图真好，能变成正放的大图，还能再收回到扇形小图
这里面涉及到的计算就是 z-index，在JS里，写成zIndex，图片的去回，都设计到这个计算，计算对了就能哪去回哪 马黑黑 发表于 2022-7-7 20:03
这里面涉及到的计算就是 z-index，在JS里，写成zIndex，图片的去回，都设计到这个计算，计算对了就能哪去 ...
这里面涉及的计算还挺多的。 老黑与游戏玩上了哇。。。。{:4_189:} 制作得好有意思的。{:4_199:} 加林森 发表于 2022-7-7 21:00
制作得好有意思的。
就等着队长来加精呢，你再不来，我都忍不住要加了{:4_173:} 红影 发表于 2022-7-7 20:52
这里面涉及的计算还挺多的。
嗯，有一些 加林森 发表于 2022-7-7 21:00
制作得好有意思的。
嗯，菇凉能去能回{:4_170:} 红影 发表于 2022-7-7 21:04
就等着队长来加精呢，你再不来，我都忍不住要加了
我去医院了，看朋友。刚回来就看见了。 马黑黑 发表于 2022-7-7 21:10
嗯，菇凉能去能回
就是就是。厉害了哇。{:4_172:} 加林森 发表于 2022-7-7 21:17
就是就是。厉害了哇。
过得去 马黑黑 发表于 2022-7-7 21:20
过得去
我等会也去找个合适的来玩玩。{:4_189:} 加林森 发表于 2022-7-7 21:25
我等会也去找个合适的来玩玩。
期待中 马黑黑 发表于 2022-7-7 21:26
期待中
嗯嗯。 醉美水芙蓉 发表于 2022-7-7 21:26
欣赏黑黑老师新作品！
谢谢。请喝水{:4_190:} 招之即来啊 绿叶清舟 发表于 2022-7-7 21:47
招之即来啊
{:4_196:}
页:
[1]
2