论坛 › 音乐沙龙 › 像鱼（致鱼儿）

马黑黑 发表于 2022-7-15 07:45

像鱼（致鱼儿）

<style>
#papa { left: -302px; width: 1200px; height: 679px; background: #eee url('https://638183.freep.cn/638183/t22/hl/fish.jpg') no-repeat; background-position: 1200px 0; box-shadow: 4px 4px 20px #000; overflow: hidden; position: relative; }
#prologue { position: absolute; width: 240px; height: 240px; left: calc(50% - 120px); top: calc(50% - 120px); cursor: pointer; transition: left 4s; }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 1200px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #663399; 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">
        <img id="prologue" src="https://638183.freep.cn/638183/t22/hl/fish.gif" alt="" />
        <div id="playbox">
                <p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">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>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1331819951.mp3"></audio>

<script>
let ww = papa.offsetWidth;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
        ['0.00','像鱼 - 王贰浪'],
        ['7.03','词：周有才'],
        ['14.05','曲：周有才'],
        ['21.08','OP：伯音时代'],
        ['29.00','这是一首简单的歌'],
        ['35.09','没有什么独特'],
        ['42.09','试着代入我的心事'],
        ['47.05','它那么幼稚'],
        ['51.05','像个顽皮的孩子'],
        ['57.01','多么可笑的心事'],
        ['63.06','只剩我还在坚持'],
        ['70.04','谁能看透我的眼睛'],
        ['77.01','让我能够不再失明'],
        ['84.00','我要记住你的样子'],
        ['90.08','像鱼记住水的拥抱'],
        ['97.08','像云在天空中停靠'],
        ['102.05','夜晚的来到'],
        ['105.09','也不会忘了阳光的温暖'],
        ['111.04','我要忘了你的样子'],
        ['118.01','像鱼忘了海的味道'],
        ['124.09','放下所有梦和烦恼'],
        ['131.10','却放不下回忆的乞讨'],
        ['166.07','多么可笑的心事'],
        ['173.06','只剩我还在坚持'],
        ['179.05','谁能看透我的眼睛'],
        ['186.08','让我能够不再失明'],
        ['193.08','记住你的样子'],
        ['200.05','像鱼记住水的拥抱'],
        ['207.03','像云在天空中停靠'],
        ['212.02','夜晚的来到'],
        ['215.06','也不会忘了阳光的温暖'],
        ['221.01','我要忘了你的样子'],
        ['227.09','像鱼忘了海的味道'],
        ['234.07','放下所有梦和烦恼'],
        ['241.08','却放不下回忆的乞讨'],
        ['247.08','只剩自己就好']
];

prologue.onclick = () => {
        prologue.style.transform = 'scale(1,1)';
        prologue.style.left = '-240px';
        aud.play();
        iniBg(papa,0,0);
        iniBg(playbox,1,10);
}

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('ended', () => {
        iniBg(papa,0,ww);
        iniBg(playbox,1,ww);
        prologue.style.transform = 'scale(-1,1)';
        prologue.style.left = 'calc(50% - 120px)';
        prologue.style.top = 'calc(50% - 120px)';
});

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) geci.innerHTML = lrcAr;
        }
});

let toMin = (val) => {
        if(!val) return '0:0';
        val = Math.floor(val);
        return parseInt(val / 60) + ':' +parseFloat(val % 60);
}

let iniBg = (ele,id,number) => {
        ele.style.transition = 'all 4s';
        id == 0 ? ele.style.backgroundPosition = number + 'px' : ele.style.left = number + 'px';
}
</script>

红影 发表于 2022-7-15 10:36

哈哈，我刚刚学会了往下拉的效果，黑黑又开始弄向左拉了{:4_173:}

红影 发表于 2022-7-15 10:37

非常有趣，那条会跑步的鱼面向左边，点一下，就带出了音乐和大鱼身上的美妙的世界{:4_199:}

马黑黑 发表于 2022-7-15 11:53

红影 发表于 2022-7-15 10:37
非常有趣，那条会跑步的鱼面向左边，点一下，就带出了音乐和大鱼身上的美妙的世界

有一定的趣味性吧。可以举一反三，设计出更好的效果。

马黑黑 发表于 2022-7-15 11:54

红影 发表于 2022-7-15 10:36
哈哈，我刚刚学会了往下拉的效果，黑黑又开始弄向左拉了

方向变换而已，会一个就会很多个

加林森 发表于 2022-7-15 15:08

挺好玩的。必须点了鱼儿才能看见后面的图片与音乐。

马黑黑 发表于 2022-7-15 18:09

加林森 发表于 2022-7-15 15:08
挺好玩的。必须点了鱼儿才能看见后面的图片与音乐。

对，要点

加林森 发表于 2022-7-15 18:30

马黑黑 发表于 2022-7-15 18:09
对，要点

知道了。

绿叶清舟 发表于 2022-7-15 21:00

@鱼儿 就让鱼一个人这么跑啊

红影 发表于 2022-7-15 21:09

马黑黑 发表于 2022-7-15 11:53
有一定的趣味性吧。可以举一反三，设计出更好的效果。

我学着做了一个，等回复完去发出来{:4_173:}

红影 发表于 2022-7-15 21:10

马黑黑 发表于 2022-7-15 11:54
方向变换而已，会一个就会很多个

是的，原理是一样。

马黑黑 发表于 2022-7-15 21:10

红影 发表于 2022-7-15 21:09
我学着做了一个，等回复完去发出来
很好，期待

马黑黑 发表于 2022-7-15 21:10

红影 发表于 2022-7-15 21:10
是的，原理是一样。

是的，只有上下左右分得清，就可以做

红影 发表于 2022-7-15 22:11

马黑黑 发表于 2022-7-15 21:10
是的，只有上下左右分得清，就可以做

这个和原来那个往下拉的还是有点不一样的。

马黑黑 发表于 2022-7-15 22:42

红影 发表于 2022-7-15 22:11
这个和原来那个往下拉的还是有点不一样的。

机制不相同。这个是背景和播放器移过来，前面的是一个元素带着子元素下落。

马黑黑 发表于 2022-7-15 22:49

红影 发表于 2022-7-15 22:11
这个和原来那个往下拉的还是有点不一样的。

不一样的还有，歌曲放完后……

红影 发表于 2022-7-16 13:02

马黑黑 发表于 2022-7-15 22:42
机制不相同。这个是背景和播放器移过来，前面的是一个元素带着子元素下落。

原来是这样。

红影 发表于 2022-7-16 13:04

马黑黑 发表于 2022-7-15 22:49
不一样的还有，歌曲放完后……

哦，原来播放完了，还能回到最初的画面，而且那条带脚的鱼是会转向的，真棒{:4_199:}

马黑黑 发表于 2022-7-16 13:04

红影 发表于 2022-7-16 13:02
原来是这样。

不过还是前面那种简单一些，虽然多加了一个HTML节点

马黑黑 发表于 2022-7-16 13:05

红影 发表于 2022-7-16 13:04
哦，原来播放完了，还能回到最初的画面，而且那条带脚的鱼是会转向的，真棒

我知道很多人多数情况都没有耐心细看帖子，这样会错过很多精彩的东东。我一般也不说。

查看完整版本: 像鱼（致鱼儿）