css+js制作一个简易的播放器

最新推荐文章于 2024-02-25 15:12:04 发布

Van-bo

最新推荐文章于 2024-02-25 15:12:04 发布

阅读量1.9k

点赞数 3

分类专栏： Web开发文章标签： css+js

本文链接：https://blog.csdn.net/qq_41573860/article/details/80437975

版权

Web开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>在线音乐播放</title>
<style>
*{margin:0;padding:0;}
body{
height:100%;weight:100%;
background: url("images/2.jpg");
background-repeat:no-repeat;
background-size:100% 100%;

} 

.music{
width:720px;
height:470px;
background:#ffff66;
margin:120px auto;
}

.music h1{
width:40% margin:auto;
color:#0066ff;
text-shadow:5px 5px 5px;<!--文本阴影-->
}

.music .m-left{
width:50%;
height:470px;
background:#ff66ff;
float:left;<!--浮动-->

}

.music .m-left .l-con{
height:410px;
background:url("images/1.png")
}

.music .m-right{
width:50%;
height:470px;
background:#ffcccc;
float:right;
}

.music .m-right ul li{
list-style:none;
border-bottom:1px solid #000033;
line-height:30px;
font-size:20px;
color:#cc0000;
padding:14px;
padding-left:20px;
cursor:pointer;<!--鼠标移到此处会变成手的样式-->
}

.music .m-left h2{
text-align:center;
line-height:60px;
background:#ff9999;
color:#ff0066;
font-weight:400
}
.music .m-right ul li:hover{background:#ffffcc}<!--鼠标移到li对应背景的变化-->
</style>

 </head>
<body>
<div class="music">
<h1><marquee left behavior=alternate>专用播放器</marquee></h1><!--alternate来回滚动 scroll重复滚动 slide不重复滚动 -->
<div class="m-left">
<h2>Online music</h2>
<div class="l-con"></div>
</div>
<div class="m-right">
<ul>
<li οnclick="play(1)">突然好想你</li>
<li οnclick="play(2)">爱你</li>
<li οnclick="play(3)">意外</li>
<li οnclick="play(4)">纸短情长</li>
<li οnclick="play(5)">云烟成雨</li>
<li οnclick="play(6)">我怀念的</li>
<li οnclick="play(7)">积木</li>
<li οnclick="play(8)">丑八怪</li>
</ul>
</div>
</div>
<script>
var audioDeo=document.createElement("audio");
function play(name){
audioDeo.src="mp3/"+name+".mp3";
audioDeo.autoplay="autoplay";
}
</script>
 </body>
</html>

Van-bo

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css+js制作一个简易的播放器

&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Keywords" content=""&gt; &lt;meta name="Description" content=""
复制链接

扫一扫

专栏目录