《离人的月亮》周笔畅（学习马老师代码）
本帖最后由 梦缘 于 2022-9-4 20:32 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 639px; top:150px; background: gray url('https://www.huachaowang.com/data/attachment/forum/202209/04/185029d877mcs8f22sc878.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
/* svg按钮↓*/
#mplayer { position: absolute; bottom: 0; }
#btnpause { display: none; }
#btnwrap, #btnplay, #btnpause { cursor: pointer; }
#btnplay:hover + btnwrap, #btnpause:hover + btnwrap { fill: gold; }
#btnwrap:hover { fill: gold; }
#btnwrap:hover + #btnplay + #btnpause { fill: red;}
#tmsg { dominant-baseline: middle; fill: snow; }
#track { shape-rendering: crispEdges; cursor: pointer; }
/* svg 歌词及动态效果 ↓ */
#lrc { position: absolute; width: 1000px; height: 80px; top: 10px; }
.text { font: bold 3em sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 4px; fill: none; stroke-width: 1.5px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: snow; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: orange; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: gold; text-shadow: 0 0 5px blue; animation-delay: -4.5s; }
.text-4{ stroke: tomato; text-shadow: 0 0 5px purple; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>
<div id="papa">
<div id="wrapper"><img id="ball" src="https://www.huachaowang.com/data/attachment/forum/202209/04/203052u5iqhcqi6l5c5zcf.jpg" alt="" /></div>
<svg id="lrc">
<text x="50%" y="50%" class="text text-1">lrc歌词</text>
<text x="50%" y="50%" class="text text-2">lrc歌词</text>
<text x="50%" y="50%" class="text text-3">lrc歌词</text>
<text x="50%" y="50%" class="text text-4">lrc歌词</text>
</svg>
<svg id="mplayer" width="400" height="60">
<circle id="btnwrap" cx="20" cy="30" r="15" fill="olive" />
<polygon id="btnplay" points="15 20, 15 40, 30 30" fill="snow" />
<g id="btnpause" fill="snow">
<rect x= "15" y="20" width="3" height="20" />
<rect x="22" y="20" width="3" height="20" />
</g>
<g id="track"stroke-width="2">
<line x1="45" y1="30" x2="245" y2="30" stroke="transparent" stroke-width = "20" />
<line x1="45" y1="30" x2="245" y2="30" stroke="snow" />
<line id="prog" x1="45" y1="30" x2="245" y2="30" stroke="red" stroke-dasharray="200" stroke-dashoffset="200" />
</g>
<text id="tmsg" x="260" y="30">00:00 | 00:00</text>
</svg>
</div>
<script>
let lrcAr = [
['0.00','离人的月亮 - 周笔畅'],
['1.00','作词 : 唐恬'],
['2.00',' 作曲 : 邓智伟'],
['16.05','蒲扇摇起夏日 的晚风'],
['23.00','我问为何月牙 又圆了'],
['29.03','老人说 是因为'],
['35.07','离人在 月亮上'],
['38.01',''],
['42.08','一路陪着孩子 闯迷宫'],
['49.02','悬在遥遥夜空 的目送'],
['55.05','我长大 才听懂'],
['62.01','懂圆缺 如聚散'],
['66.07','月又圆了不管 停在哪里'],
['71.09','有人在等你 才敢夜路远行'],
['80.02','老人说看月亮 总有阴影'],
['85.01','是离开的人 种下森林'],
['89.00',''],
['93.03','当某天我们 不在一起'],
['98.02','当我又想你 你住在月光里'],
['106.03','陪我在黑暗中 流浪飞行'],
['111.04','而思念给我 勇气'],
['115.00',''],
['118.03','是路上你和我 的遥望'],
['124.09','月亮才把故乡 挂天上'],
['131.01','榕树下 圆桌旁'],
['137.08','这一刻 我回家'],
['139.00',''],
['142.02','月又圆了不管 停在哪里'],
['147.06','有人在等你 才敢夜路远行'],
['155.07','老人说看月亮 总有阴影'],
['160.07','是离开的人 挥手不停'],
['168.09','同个月亮照过 儿时屋顶'],
['173.04','又照我 穿过人群'],
['176.07','一次次告别 用被爱过的心'],
['181.10','人们在月光下 想念彼此'],
['186.06','是思念最古老的 仪式'],
['193.75',' 监制 : 梁翘柏'],
['201.44',' 吉他 : 薛峰'],
['209.14',' 贝斯 : 韩阳'],
['216.84',' 鼓 : 徐协伦'],
['224.53',' 弦乐编写 : 达日丹'],
['232.22',' 弦乐 : 中国爱乐乐团'],
['239.92',' 小提琴 : 曾诚'],
['247.62',' 谢谢马老师代码'],
['255.31',' 谢谢大家支持'],
['263.00',' 谢谢大家欣赏']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://music.163.com/song/media/outer/url?id=1390417840.mp3';
aud.autoplay = true;
aud.loop = true;
track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - prog.getAttribute('x1')) / lw;
btnwrap.onclick = btnpause.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = lw - lw * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) {
for(ele of txtAr) ele.textContent = 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>
<br><br><br><br><br><br><br><br><br><br></td></tr> 制作得真漂亮。好大的月亮啊。古色古香的，赞！{:4_199:} 歌词跳得有点快了点。可以调整的。 加林森 发表于 2022-9-4 20:24
制作得真漂亮。好大的月亮啊。古色古香的，赞！
谢谢老师的欣赏支持，问好！{:4_191:} 制作真漂亮，赞{:4_199:} 绿叶清舟 发表于 2022-9-4 20:50
制作真漂亮，赞
谢老师的鼓励支持，问好！{:4_190:} 图片选得漂亮，动图也用得漂亮，欣赏梦缘好帖{:4_187:} 梦缘 发表于 2022-9-4 20:52
谢老师的鼓励支持，问好！
不客气了，周末好 红影 发表于 2022-9-4 21:07
图片选得漂亮，动图也用得漂亮，欣赏梦缘好帖
谢谢老师的欣赏支持，问好！{:4_191:} 欣赏好帖 梦缘 发表于 2022-9-4 20:35
谢谢老师的欣赏支持，问好！
晚上好！好样的！ 梦缘 发表于 2022-9-4 21:12
谢谢老师的欣赏支持，问好！
不客气啊，晚上好{:4_187:} 马黑黑 发表于 2022-9-4 21:26
欣赏好帖
谢谢老师的欣赏支持，问好！{:4_190:} 梦缘 发表于 2022-9-5 08:40
谢谢老师的欣赏支持，问好！
{:5_108:}
页:
[1]