【刚好遇见你】 - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2021-11-9 20:07

本帖最后由加林森于 2022-2-26 19:15 编辑 <br /><br />来看你发表于 2021-11-9 20:03
好听又好看
喜欢就好{:4_171:}

<style type="text/css">
/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/621a0b7c2ab3f51d916ece5a.jpg') no-repeat; padding: 12px; }
/* 帖子标题 */
#txtDiv { position: absolute; color:#ddd; font-weight:bold; font-size: 2em; text-shadow: 2px 2px 4px #ccc; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 500px; top: 40px; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 20px; font-size: 1em; line-height: 20px; color: #fff; text-shadow: 1px 1px 2px red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 450px; width: 8px; height: 8px; background: white; border: 13px solid; border-color: orange green; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25); cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div id="waiDiv">
<div id="txtDiv">回<br>来<br>爱<br>的<br>身<br>边</div>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="https://www.joy127.com/url/88732.mp3"></audio>

<script language="javascript">

var lrcAr=[
["00:00:00","回来爱的身边-林忆莲"],
["00:49.00","触不到你的梦"],
["00:50.22","感不到你心动"],
["00:51.15","听不到你的话"],
["00:53.76","听得到我哭吧"],
["00:54.92","又站在你眼前"],
["00:55.35","望着是你默然"],
["00:56.58","正要强忍不哭"],
["00:57.18","那里禁得心酸"],
["00:58.46","知不知我呼唤"],
["00:59.57","知不知我依伴"],
["01:02.71","知不知我心乱"],
["01:03.41","知不知我不断"],
["01:04.67","念着是你当年"],
["01:06.04","日夜在痛缠绵"],
["01:08.31","纵似爱的深渊"],
["01:10.57","我却再想依恋"],
["01:18.10","回来爱的身边"],
["01:22.43","这天"],
["01:24.70","回来爱的身边"],
["01:28.85","可否给我热暖"],
["01:31.40","我是舍不得爱恋"],
["01:34.78","可知我心里依然"],
["01:45.04","知不知我呼唤"],
["01:48.12","知不知我依伴"],
["01:50.95","知不知我心乱"],
["02:04.39","知不知我不断"],
["02:08.19","念着是你当年"],
["02:15.56","但愿让我回旋"],
["02:34.88","再爱你多一点"],
["02:58.10","再爱你多一天"],
["03:06.55","求你也再次为我醉一遍"],
["03:24.20","爱就算曾离弃过尚有点"],
["03:48.81","OOH"],
["03:53.20","可不可再次热恋"],
["03:56.72","说吧说声但求承认"],
["03:58.44","爱尚有的是明天"],
["04:10.04","回来爱的身边留多一天"],
["04:40.81","(这天)"],
["04:43.10","回来爱的身边"],
["04:47.60","可知一切未变"],
["04:49.57","我是舍不得爱恋"],
["04:56.07","可否再一次依然"],
["04:59.92","让我躺于你的肩"],
["05:03.61","让我安躺于你的肩"],
["05:18.33","回来爱的身边"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
var mbtn = document.getElementById('btn-ro'); //播放暂停按钮
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
   lrcAr = toSec(lrcAr);
   lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
   let tmpAr = lrcTime.split(':');
   lrcTime = tmpAr * 60 + parseInt(tmpAr);
   return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#fff";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "orange";
            }
   }
}
// 播放结束重置歌词样式
myaud.onended = function() {
   document.getElementById("li" + lrcAr).style.color = "black";
   lrcUl.style.top = 0;
   this.play();
}
// 按钮相关
myaud.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mbtn.onclick = function(){ myaud.paused ? (myaud.play(), this.style.animationPlayState="running") : (myaud.pause(), this.style.animationPlayState="paused"); }
</script>

加林森 发表于 2021-11-9 20:08

来看你发表于 2021-11-9 20:03
队长V5

跟着兄弟学习的代码

三月的阳光 发表于 2021-11-9 20:12

加林森发表于 2021-11-9 20:07
分享专区在哪里啊？

https://www.huachaowang.com/forum.php?mod=forumdisplay&fid=52置顶部位，你曾经说空了来看的，我可是一直在期盼着呢~~{:4_173:}

加林森 发表于 2021-11-9 20:12

千羽发表于 2021-11-9 20:06
喜欢他唱的这首歌，不喜欢李玉刚

我也不喜欢李玉刚，但这首歌曲有他没有办法。

加林森 发表于 2021-11-9 20:14

三月的阳光发表于 2021-11-9 20:12
https://www.huachaowang.com/forum.php?mod=forumdisplay&fid=52置顶部位，你曾经说空了来看的，我可 ...

现在找到了，我就专门跑你那里去借代码了哈。

顾-念 发表于 2021-11-9 20:16

“刚好遇见”一切都是那么简单，好听的歌！

三月的阳光 发表于 2021-11-9 20:18

加林森发表于 2021-11-9 20:14
现在找到了，我就专门跑你那里去借代码了哈。

哈哈，自家人，我的就是你的，你的还是你的~~{:4_173:}

小辣椒 发表于 2021-11-9 20:18

队长晚上好{:4_187:}

小辣椒 发表于 2021-11-9 20:18

队长发视频也是很溜了{:4_199:}{:4_199:}

千羽发表于 2021-11-9 20:18

加林森发表于 2021-11-9 20:12
我也不喜欢李玉刚，但这首歌曲有他没有办法。

嗯，听歌就行，别看人{:4_181:}

三月的阳光 发表于 2021-11-9 20:20

千羽发表于 2021-11-9 20:18
嗯，听歌就行，别看人

嗯，我们就听歌不看人~~{:4_189:}

三月的阳光 发表于 2021-11-9 20:20

小辣椒发表于 2021-11-9 20:18
队长晚上好

师傅来了，晚上好~~{:4_171:}

小辣椒 发表于 2021-11-9 20:23

千羽发表于 2021-11-9 20:06
喜欢他唱的这首歌，不喜欢李玉刚

千羽，哈哈{:4_173:}

小辣椒 发表于 2021-11-9 20:24

加林森发表于 2021-11-9 20:07
分享专区在哪里啊？
队长我去找连接发你
视频
音乐短片地址分享
https://www.huachaowang.com/forum.php?mod=viewthread&tid=41644&fromuid=4275
(出处: 花潮论坛)

红影发表于 2021-11-9 20:24

加林森发表于 2021-11-9 19:05
就是就是，各种我都准备玩玩。

这个玩法也简单，有好看{:4_204:}

千羽发表于 2021-11-9 20:27

三月的阳光发表于 2021-11-9 20:20
嗯，我们就听歌不看人~~

是，他歌唱的好{:4_181:}

小辣椒 发表于 2021-11-9 20:28

三月的阳光发表于 2021-11-9 20:20
师傅来了，晚上好~~

阳光晚上好，今天上来早一点{:4_187:}

千羽发表于 2021-11-9 20:29

小辣椒发表于 2021-11-9 20:23
千羽，哈哈

小辣椒，{:4_179:}

小辣椒 发表于 2021-11-9 20:30

千羽发表于 2021-11-9 20:29
小辣椒，

千羽来个大大的{:4_179:}

三月的阳光 发表于 2021-11-9 20:31

千羽发表于 2021-11-9 20:27
是，他歌唱的好

是的，歌曲确实还是可以的，人就不一样了~~{:4_173:}

页: 1 [2] 3 4 5

花潮论坛's Archiver