甜甜小妹

梦江南 发表于 2024-6-11 18:06

<div style="position:relative; left: -300px;"><img src="https://pic.imgdb.cn/item/6666b2625e6d1bfa050545d3.jpg"></img>
<img style="position:absolute; left: 10px; top: -30px;" width=400 height=300src="https://i.miji.bid/2023/12/04/9cab73bb18ea4b529f162ce77549984c.gif"></img><div>
<div class="container">
   <div class="btn">
   <span id="bf"onclick="bf();"style="width: 960px; height: 600px;z-index: 550;position: absolute;top:-600px; left:-40px;"></span>
   <span id="bf"onclick="rbf();"></span>
   </div>
<audio autoplay="" class="audio" id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=1477344227.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>

<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>

<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:550px; left:40px;z-index: 550;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 550;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:-70px; left:80px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:楷体;
font-size: 0px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #073D5F;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}

.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
</style>
<script >var lrc = `甜甜小妹
甜甜小妹 - 杨钰莹
翻唱：唐珺倩（唐山妞妞）
歌词编辑：梦江南
甜甜甜的酒窝窝
甜甜甜的笑
甜甜甜的脸**
长呀长的俏
眉毛哟弯弯哟
会呀会说话
甜甜的小嘴儿
赛呀赛樱桃
小妹妹对你
甜甜甜的笑
叫你心里哟
甜呀甜滋滋
吃不香呀睡不着呀
忘也忘不了忘不了
天上白云飘呀飘
小路静悄悄
和你一起走呀走
心儿跳呀跳
你若真心对我好
别像白云飘呀飘
你若真心对我好
偕首到白头
甜甜甜的酒窝窝
甜甜甜的笑
甜甜甜的歌儿哟
赛过百灵鸟
眼睛哟溜溜哟
会呀会传情
甜甜的脚步儿
好像水上飘
小妹妹为你
唱呀唱支歌
叫你心里哟
甜呀甜滋滋
吃不香呀睡不着呀
忘也忘不了忘不了
你若真心对我好
别像白云飘呀飘
你若真心对我好
偕首到白头
甜甜甜的酒窝窝
甜甜甜的笑
甜甜甜的脸**
长呀长的俏
眉毛哟弯弯哟
会呀会说话
甜甜的小嘴儿
赛呀赛樱桃
小妹妹对你
甜甜甜的笑
叫你心里哟
甜呀甜滋滋
吃不香呀睡不着呀
忘也忘不了忘不了
天上白云飘呀飘
小路静悄悄
和你一起走呀走
心儿跳呀跳
你若真心对我好
别像白云飘呀飘
你若真心对我好
你若真心对我好
偕首到白头
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
   var twoParts = content.split("]");
   var time = twoParts.substr(1);
   var timeParts = time.split(":");
   var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}

var lrcArray = getLrcArray();

function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}

inputLrc();

function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 80, lrc_ul_height = 90;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
   top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
   function rbf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         audio.currentTime = 0;
         audio.play();
         bf.innerText="";
   }

   function bf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         if (audio !== null) {
            if (audio.paused) {
               audio.play(); //audio.play();// 这个就是播放
               bf.innerText="";
            } else {
               audio.pause(); // 这个就是暂停
               bf.innerText="";
            }
         }
   }
</script>

起个网名好难 发表于 2024-6-11 18:41

欣赏美帖

红影发表于 2024-6-11 19:20

漂亮的制作，欣赏梦江南好帖{:4_199:}

红影发表于 2024-6-11 19:39

这个点画面可以暂停，没看到按钮呢{:4_204:}

梦江南 发表于 2024-6-12 08:24

起个网名好难发表于 2024-6-11 18:41
欣赏美帖

谢谢老师沙发支持！早上好！{:4_204:}

梦江南 发表于 2024-6-12 08:25

红影发表于 2024-6-11 19:20
漂亮的制作，欣赏梦江南好帖

谢谢影子分赏支持，早上好！{:4_204:}

梦江南 发表于 2024-6-12 08:27

红影发表于 2024-6-11 19:39
这个点画面可以暂停，没看到按钮呢

回影子，暂停没有设置按钮。

起个网名好难 发表于 2024-6-12 08:31

梦江南发表于 2024-6-12 08:24
谢谢老师沙发支持！早上好！

https://img0.baidu.com/it/u=2445131560,1807014584&fm=253&fmt=auto&app=138&f=JPEG?w=592&h=842

红影发表于 2024-6-12 13:50

梦江南发表于 2024-6-12 08:25
谢谢影子分赏支持，早上好！

问好梦江南，下午好{:4_187:}

红影发表于 2024-6-12 13:50

梦江南发表于 2024-6-12 08:27
回影子，暂停没有设置按钮。

嗯嗯，知道了{:4_204:}

梦江南 发表于 2024-6-12 17:00

起个网名好难发表于 2024-6-12 08:31

https://www.yiyuen.com/e/file/view/659647

梦江南 发表于 2024-6-12 17:01

红影发表于 2024-6-12 13:50
问好梦江南，下午好

https://www.yiyuen.com/e/file/view/659647

梦江南 发表于 2024-6-12 17:06

红影发表于 2024-6-12 13:50
嗯嗯，知道了

https://www.yiyuen.com/e/file/view/659648

红影发表于 2024-6-12 21:50

梦江南发表于 2024-6-12 17:01

这动图好看{:4_173:}

红影发表于 2024-6-12 21:51

梦江南发表于 2024-6-12 17:06

这个也好看{:4_187:}

页: [1]

花潮论坛's Archiver

甜甜小妹