HTML5+css怎么用盒子给音乐播放器做造型！！！
1个回答
2017-12-01 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MUSIC</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#bg{position:absolute;top:0px;left:0px;background:url("./img/bg_1.jpg");background-size:cover;height:100%;width:100%;overflow:hidden;}
#music_icon{position:fixed;top:10px;right:10px;background:url("./img/music_icon.png");background-size:cover;height:55px;width:55px;}
#music_board{height:500px;width:400px;background:#999;margin:10% auto;border-radius:12px;box-shadow:0px 0px 15px #222;display:none;}
#music_gif{height:280px;width:380px;position:relative;top:20px;left:10px;background:url("./img/music_5.gif");background-size:cover;}
#music_control{text-align: center;position: relative;top: 50px;color: rgb(255, 255, 255);font-size: 1.5em;}
#control{margin-top:45px;width:100%;height:70px;text-align:center;}
</style>
</head>
<body>
<audio id="music" src="./mp3/xinxiangan.mp3" loop="loop"></audio>
<div id="bg">
<div id="music_icon" onclick="show_music_board()"></div>
<div id="music_board">
<div id="music_gif"></div>
<div id="music_control">MUSIC BOARD
<div id="control">
<img id="control_img" src="./img/pause_button.png" height="60px" onclick="music_control()">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var music = document.getElementById("music");//建立audiod对象
var control_img = document.getElementById("control_img");//建立播放按钮图片对象，为了更好的操作
var music_board = document.getElementById("music_board");//建立music面板的对象，为了更好的操作
var lock = false;//设置一个布尔变量，用于判断音乐的播放与暂停
function music_control(){//音乐开始与暂停
if( lock == false){
music.play();
control_img.setAttribute("src", "./img/pause_button.png");
lock = true;
}
else{
music.pause();
control_img.setAttribute("src", "./img/play_button.png");
lock = false;
}
}
function show_music_board(){//music面板的显现与展示
if( music_board.style.display == "none"){music_board.style.display = "block";
lock = false;
music_control();
}
else{
music_board.style.display ="none";
lock = true;
music_control();
}
}
</script>
</body>
</html>
追问
做造型可以不用js不
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
