你能看出几个毛病
本帖最后由 亚伦影音工作室 于 2026-4-25 11:15 编辑 <br /><br /><style type="text/css">.container{ position: relative;
top:0%;
left: -250px;
z-index: 2000;
width: 1086px;
height: 620px;
overflow: hidden;
background: linear-gradient(-122deg,#ff0000, #006400, #ff0000);
background: -moz-linear-gradient(-122deg,#ff0000, #006400,#ff0000);
background: -webkit-linear-gradient(-122deg,#ff0000, #006400,#ff0000);
}
#gradient {position:absolute;z-index: -2;
width: 100%;
height: 100%; top:0%;
left: 0px;
background:url(https://img1.oldkids.cn/upload/2026/04/13/photo_0_20260413091230910.gif)no-repeat center/cover;
mix-blend-mode:overlay;
animation: rott 8s linear infinite;
}
.music{
width: 50%;
height: 100%;
border-right: 1px solid rgba(255,255,255,0.5);
box-sizing: border-box;
float: left;
}
.photo{
width: 100%;
}
.photo_pic{
position: relative;
width: 250px;
height: 250px;
margin: 75px auto 0;
border-radius: 50%;
background: url(https://pic1.imgdb.cn/item/69bf52824235741b1e445539.gif)no-repeat -270px 0px/cover;
animation: rot 8s linear infinite,rott 8s linear infinite;
box-shadow:0 0 0 2px #000, 0 0 0 4px #fff;
}
@keyframes rot {to { transform: rotate(360deg);}}
@keyframes rott {to {filter: hue-rotate(360deg); }}
.choose{
height:150px;
}
.choose_obj{
width: 50%;
float: left;
text-align: center;
color: #fff
}
.icon{
margin-top: 40px;
height: 50px;
font-size:30px;
line-height: 50px;
font-family: "iconfont";
cursor: pointer;
text-shadow: 2px 2px 0px #666;
}
.icon.yellow+span{
color: yellow;
}
.icon.pink+span{
color: #f7759f;
}
.choose_obj span{
display: block;
height: 30px;
line-height: 30px;
font-family: "";
font-size: 15px;
}
.cd{
width: 10px;
height: 10px;
position: absolute;
top:50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
background: #666;
border: 10px solid #fff;
box-shadow: 0 0 1px #000;
border-radius: 50%;
}
.progress{
font-family: "iconfont"
}
.lyric{
width: 50%;
height: 100%;
float: right;
}
time{
font-size: 12px;
width: 49px;
text-align: center;
color: #fff;
height: 50px;
line-height: 50px;
float: left;
}
.progress_bar{
position: relative;
width: 80%;
height: 2px;
margin-top: 23px;
background-color: #fff;
float: left;
cursor: pointer;
}
.progress_cube{
position: absolute;
left: 0;
top: -5px;
width: 4px;
height: 4px;
background-color: #000;
border:5px solid #fff;
border-radius: 50%;
cursor: pointer;
}
.progress_obj{
line-height: 30px;
color: #fff;
}
.ctrl_btn{
width: 99px;
float: left;
}
.ctrl_btn .btn{
width: 33.3%;
float: left;
text-align: center;
cursor: pointer;
}
.btn{
font-size: 10px;
}
.play_btn{margin-top: -2px;
font-size: 22px;
}
.ctrl_info{
width: 300px;
float: left;
}
.vol{
padding-left: 230px;
width: 100px;
height: 100%;
float: left;
}
.vol_bar{
position: relative;
width: 70px;
float: right;
height: 2px;
background-color: #fff;
margin-top: 13px;
}
.vol_cube{
position: absolute;
left: 0;
top: -4px;
width: 3px;
height: 3px;
background-color: #000;
border:4px solid #fff;
border-radius: 50%;
cursor: pointer;
}
.lyric_tit{font-size: 28px;
height: 50px;
line-height: 50px;
color: #fff;
text-align: center;
font-weight: 700;
margin-top: 30px;
}
.lyric_con{
position: relative;
line-height: 40px;
color: #fff;
font-size: 16px;
padding: 0px 30px ;
text-align: center;
height: 400px;
overflow: hidden;
margin-top: 30px;
}
#lyric_txt{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
}
.lyric_con p.played{
color: #fff;
}
.lyric_con p.active{
color: yellow;
font-size: 22px;
font-weight: 700;
}
.audio{
display: none;
}
.list{
width: 100px;
cursor: pointer;
float: right;
text-align: center;
}
.list{position: relative;
right: -120px;
width: 100px;
height:20px;
bottom: 30px;
}
#list_con{
position: absolute;
bottom: 60px;
right: 250px;
width: 200px;
height:200px;
color: #fff;
padding: 30px 0;
border-radius: 5px;
background:#0000;
font-family: "";
font-size: 14px;
cursor: pointer;
}
.tiem{list-style: none;
padding: 0.2rem 1rem;
color: #B99329;
cursor: pointer;
}
.tiem:hover{
color: #00ff00;
}
</style>
<div class="container" id="container">
<div id="gradient"></div>
<div class="music">
<div class="photo">
<div class="photo_pic" id="photo_pic"><div class="cd"></div></div>
<div class="choose">
<div class="choose_obj choose_like" >
<div class="icon" id="icon1">
💖
</div>
<span>点赞</span>
</div>
<div class="choose_obj choose_share">
<div class="icon" id="icon2">
⭐
</div>
<span>收藏</span>
</div>
</div>
</div>
<div class="progress">
<div class="progress_obj clear">
<time>00:00</time>
<div class="progress_bar" id="progress_bar"><div class="progress_cube" id="progress_cube"></div></div>
<time>00:00</time>
</div>
<div class="progress_obj clear">
<div class="ctrl_btn">
<div id="prev_btn" class="prev_btn btn">◀◀</div>
<div id="play_btn" class="play_btn btn">❚❚</div>
<div id="next_btn" class="next_btn btn">▶▶</div>
</div>
<div class="ctrl_info">
<div class="vol">🔊<div class="vol_bar" id="vol_bar"><div class="vol_cube" id="vol_cube"></div></div></div>
<div class="list" id="list">歌曲列表<div id="list_con"></div></div>
</div>
<audio src="https://img4.oldkids.cn/upload/2026/04/10/blog_260855907_20260410155100461.mp3"autoplay></audio>
</div>
</div>
</div>
<div class="lyric">
<div class="lyric_tit" id="lyric_tit"></div>
<div class="lyric_con" id="lyric_con"><div id="lyric_txt"></div></div>
</div>
</div>
<script>
//data
var lyric=[{'name':"好想醉一回",'img':'https://pic1.imgdb.cn/item/69c1e915ac52b0dbce286f66.jpg','audio_src':'https://img4.oldkids.cn/upload/2026/04/10/blog_260855907_20260410155100461.mp3','content':"好想醉一回(合唱版) 词：马健涛 曲：马健涛 好想醉一回 忘掉那伤悲 稀里哗啦的眼泪 落在这酒杯 好想醉一回 将痛苦麻醉 找个没人的地方 痛快哭一回 为何这人间疲惫 都让我一个人背 为何这世间酸楚 都让我一人承受 白天人前装笑颜 夜晚泪水却流干 今夜拿酒杯作伴 对酒讲我的心酸 我的心好酸 好想醉一回 忘掉那伤悲 稀里哗啦的眼泪 落在这酒杯 好想醉一回 将痛苦麻醉 找个没人的地方 痛快哭一回 白天人前装笑颜 夜晚泪水却流干 今夜拿酒杯作伴 对酒讲我的心酸 我的心好酸 好想醉一回 忘掉那伤悲 稀里哗啦的眼泪 落在这酒杯 好想醉一回 将痛苦麻醉 找个没人的地方 痛快哭一回 好想醉一回 忘掉那伤悲 稀里哗啦的眼泪 落在这酒杯 好想醉一回 将痛苦麻醉 找个没人的地方 痛快哭一回"
},{'name':"受伤的是我",'img':'','audio_src':'https://img2.oldkids.cn/upload/2026/04/10/blog_260855907_20260410154234661.mp3','content':"受伤的是我(男女对唱版) 词曲：马健涛 编曲：马健涛 混音：马健涛 母带：马健涛 出品：执着文化 你已经变心了 我却还在执着 曾问镜子里的我 快乐不快乐 你开始讨厌我 说话不看着我 开始嫌弃我啰嗦 是不是不爱我了 我招谁惹谁了 受伤的总是我 我将你藏进我心窝 你却用刀刺痛我 该爱的人爱了 该伤的心伤了 不该流的泪流干了 求你别再折磨我 你不再需要我 就算我怎么做 我是不合脚的鞋子 你该脱就要脱 我收拾了行李 悄悄地离开你 等你醒来发现我离去 别难过这都是为你 我招谁惹谁了 受伤的总是我 我将你藏进我心窝 你却用刀刺痛我 该爱的人爱了 该伤的心伤了 不该流的泪流干了 求你别再折磨我 我招谁惹谁了 受伤的都是我 我将你藏进我心窝 你却用刀刺痛我 该爱的人爱了 该伤的心伤了 不该流的泪流干了 求你别再折磨我 不该流的泪流干了 求你别再折磨我"},{'name':"这一别是永远",'img':'','audio_src':'https://img1.oldkids.cn/upload/2026/03/15/blog_260848378_20260315185326441.mp3','content':"这一别是永远(女版)-铃花儿 作词：黑奔驰 作曲：黑奔驰 企划：大硕子/黑奔驰 演唱：铃花儿 ☆★Lrc编辑 梅竹★☆ ☆★协编 蓝菊★☆ 亚伦影音工作室出品 这一别 是永远 隔着海 隔着天 思念积成了心头的雪 梦里面 千万遍 看不清 你的脸 能否再续上来世的缘 (Music) 卸下一身风霜 伴着月光 镜子里的脸庞 那么沧桑 总是习惯回头望 总觉得你还在老地方 原来最喧嚣的竟是这空荡 昏暗的灯摇晃 夜太漫长 酒杯碰碎了月亮 满身过往 关上心房的窗 骗自己安然无恙 为何岁月只教人念念不忘 这一别 是永远 隔着海 隔着天 思念积成了心头的雪 梦里面 千万遍 看不清 你的脸 能否再续上来世的缘 这一别 是永远 隔着海 隔着天 思念积成了心头的雪 梦里面 千万遍 看不清 你的脸 能否再续上来世的缘 (Music) ☆★梅竹谢谢欣赏★☆ =End= 亚伦影音"}]
window.onload=function()
{
var play_btn=document.getElementById("play_btn");
var prev_btn=document.getElementById("prev_btn");
var next_btn=document.getElementById("next_btn");
var audio=document.getElementsByTagName("audio");
var initTime=document.getElementsByTagName("time");
var time=document.getElementsByTagName("time");
var progress_bar=document.getElementById("progress_bar");
var progress_cube=document.getElementById("progress_cube");
var vol_bar=document.getElementById("vol_bar");
var vol_cube=document.getElementById("vol_cube");
var lyric_con=document.getElementById("lyric_con");
var lyric_txt=document.getElementById("lyric_txt");
var photo_pic=document.getElementById("photo_pic");
var icon1=document.getElementById("icon1");
var icon2=document.getElementById("icon2");
var lyric_tit=document.getElementById("lyric_tit");
var list_con=document.getElementById("list_con");
var list_item=list_con.getElementsByTagName("p");
var songIndex=0;
var container=document.getElementById("container");
var obj;
function config()
{
this.play_mark=true;
this.duration=audio.duration;
this.play_btn="❚❚";
this.vol=audio.volume;
this.timer=null;
this.rotateSum=0;
this.icon1=icon1.innerHTML;
this.icon2=icon2.innerHTML;
this.icon1_co=icon1.style.color;
this.endplay_btn=" ▶";
this.endicon1=icon1.innerHTML;
this.endicon2="⭐";
}
obj= new config();
//б
var allSong="";
for(var song=0;song<lyric.length;song++)
{
allSong+="<p>"+lyric.name+"</p>";
}
list_con.innerHTML=allSong;
list_con.style.height=lyric.length*30+"px";
for(var listIndex=0;listIndex<list_item.length;listIndex++)
{
list_item.index=listIndex;
list_item.onclick=function(ev)
{
var ev=ev||window.event;
ev.stopPropagation();
songIndex=this.index;
change_music();
}
}
list_con.style.display="none";
list.onclick=function()
{
if(list_con.style.display=="none")
{
list_con.style.display="block";
}
else{
list_con.style.display="none";
}
}
//
next_btn.onclick=function(){
songIndex++;
change_music();
}
prev_btn.onclick=function(){
songIndex--;
change_music();
}
function change_music()
{
clearInterval(obj.timer);
if(songIndex>=lyric.length)
{songIndex=0}
else if(songIndex<0)
{songIndex=lyric.length}
obj= new config();
iconinit();
audioInit();
playedTime();
lyric_ctrl();
}
//
function audioInit()
{
time.innerHTML=format(audio.duration);
audio.volume=0.5;
play_btn.innerHTML=obj.play_btn;
vol_cube.style.left=audio.volume*vol_bar.offsetWidth+"px";
lyric_tit.innerText=lyric.name;
photo_pic.style.background="url("+lyric+")";
audio.src=lyric.audio_src;
progress_cube.style.left=0;
}
audioInit();
//
audio.addEventListener("timeupdate",function()
{
playedTime();
})
function playedTime(){
if(audio.currentTime==audio.duration)
{
next_btn.onclick();
play_btn.onclick();
}
var n=audio.currentTime/audio.duration;
progress_cube.style.left=n*progress_bar.offsetWidth+"px";
initTime.innerHTML=format(audio.currentTime);
var id_num=parseInt(audio.currentTime);
var lyric_p=document.getElementsByTagName("p");
for(var i=0;i<lyric_p.length;i++)
{
lyric_p.index=i;
}
if(document.getElementById("lyric"+id_num))
{
var obj=document.getElementById("lyric"+id_num);
for(var i=0;i<obj.index;i++)
{
lyric_p.className="played";
}
for(var j=obj.index;j<lyric_p.length;j++)
{
lyric_p.className="";
}
obj.className="yellow active";
lyric_txt.style.top=lyric_con.offsetHeight/2-obj.offsetTop+"px";
}
}
function format(time)
{
var time=parseInt(time);
var m=parseInt(time/60);
var s=parseInt(time%60);
m=zero(m);
s=zero(s);
function zero(num)
{
if(num<10)
{
num="0"+num;
}
return num;
}
return m+":"+s;
}
//
progress_cube.onmousedown=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-this.offsetLeft;
this.onmousemove=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>progress_bar.offsetWidth-14){x=progress_bar.offsetWidth-14}
playctrl(x);
}
document.onmouseup=function()
{
document.onmousemove=null;
progress_cube.onmousemove=null;
}
}
function play_ctrl(x){
var timego=x/progress_bar.offsetWidth*audio.duration;
progress_cube.style.left=x+"px";
audio.currentTime=timego;
playedTime();
}
//λ
progress_bar.onclick=function(ev)
{
var ev=ev||window.event;
var dis=ev.clientX-(container.offsetLeft+progress_bar.offsetLeft)-7;
progress_cube.style.left=dis+"px";
play_ctrl(dis);
}/**/
//
vol_cube.onmousedown=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-vol_cube.offsetLeft;
this.onmousemove=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>vol_bar.offsetWidth-11){x=vol_bar.offsetWidth-11}
var volresult=x/vol_bar.offsetWidth;
this.style.left=x+"px";
audio.volume=volresult;
}
document.onmouseup=function()
{
document.onmousemove=null;
vol_cube.onmousemove=null;
}
}
//
play_btn.onclick=function()
{audio.play();
clearInterval(obj.timer);
if(obj.play_mark)
{
this.innerHTML=obj.play_btn;
audio.play();
photo_pic.style.animationPlayState = 'running';
}
else{
this.innerHTML=obj.endplay_btn;
audio.pause();
photo_pic.style.animationPlayState = 'paused';
}
obj.play_mark=!obj.play_mark;
}
//
function lyric_ctrl()
{
var lyricObj=lyric.content;
var temp=lyricObj.split("[");
var html="";
for(var i=0;i<temp.length;i++)
{
var arr=temp.split("]");
var text=(arr);
var time=arr.split(",");
var temp2=time.split(".");
var ms=temp2;//
var temp3=temp2.split(":");
var s=temp3;//
var m=temp3;//
var s_sum=parseInt(m*60)+parseInt(s);
if(text)
{
html+="<p id='lyric"+s_sum+"'>"+text+"</p>";
}
}
lyric_txt.innerHTML=html;
}
lyric_ctrl();
function iconinit(){
icon1.className="icon";
icon1.innerHTML=obj.icon1;
icon1.style.color="#fff";
icon2.className="icon";
icon2.style.color="#fff";
}
//
icon2.onclick=function()
{
if(this.innerHTML==obj.icon2)
{
this.innerHTML=obj.endicon2;
this.style.color="yellow";
this.className="icon yellow";
}
else{
this.innerHTML=obj.icon2;
this.style.color="#fff";
this.className="icon";
}
}
icon1.onclick=function()
{
if(this.style.color==obj.icon1_co)
{
this.innerHTML=obj.endicon1;
this.style.color="#f7759f";
this.className="icon pink";
}
else{
this.innerHTML=obj.icon1;
this.style.color=obj.icon1_co;
this.className="icon";
}
}
}
</script>
很漂亮的制作，三首歌曲都很好听，切换也很快，没看出什么毛病啊{:4_173:} 小播还是变色的，真漂亮。欣赏亚伦老师好帖{:4_187:} 我无法切换歌曲。
欣赏学习老师精彩！
页:
[1]