HTML5制作的精美前端音乐页面_基于html5的由音乐专辑网站资源-CSDN文库

共12个文件

mp3：5个

png：2个

js：2个

html5音乐

1星需积分: 50 32 浏览量 2016-11-12 10:07:36 上传评论 7 收藏 42.08MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

html音乐开发.rar （12个子文件）

html音乐开发

mp3

带泪的鱼 - 一个人唱情歌.mp3 9.01MB

朴树 - 平凡之路.mp3 11.52MB

许嵩 - 拆东墙.mp3 9.95MB

我的好兄弟.mp3 4.33MB

Tank - 三国恋.mp3 9.38MB

jquery.filedrop.js 7KB

jquery-1.4.2.min.js 78KB

music.html.bak 4KB

image

bg.png 41KB

bo.png 629B

1.jpg 35KB

music.html 4KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" Content="text/html; charset=gb2312"/> <meta name="keywords" content="关键词"/> <meta name="description" content=""/> <head> <style type="text/css"> .div{;width:610px;height:500px;margin:100px auto} .div1{background:#cccccc;width:300px;height:500px;float:left;border-radius:6px 6px 0px 0px} .div2{background:#333333;width:300px;height:500px;float:right} .title{height:65px ;text-align:center;line-height:65px;background:#adfeaf;border-radius:6px 6px 0px 0px} .con{width:300px;height:435px;background:url("image/1.jpg") no-repeat;background-size:cover;position:relative} .img{width:300px;height;435px;padding-top:10px} .text{width:300px;height;435px;position:absolute;top:0;left:0;} .d_tltle{width:100%;height:48px;background:#ff3366; background-image:-webkit-gradient(linear,left top,left buttom,color-stop(0,#f87d7a),color-stop(1,#ef6a6c)); text-align:center;color:white;line-height:48px;border-radius:6px 6px 0px 0px;} .div2 .m_con ul li{list-style:none;line-height:40px;border-bottom:1px solid #1b1f25; background-image:-webkit-gradient(linear,left top,left buttom,color-stop(0,#262c35),color-stop(1,#212732));margin-left: -25px;} .m_con ul li i{width:12px;height:16px;display:block;background-image:url("image/bo.png"); margin:12px;float:left} .div2 .m_con ul li a{width:200px;display:block;float:left;text-decoration:none;color:#848484} .div2 .m_con ul li a:hover{color:#fff} /*定义关键帧*/ @keyframes arry{ 0%{ transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg) } 100%{ transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); } } .zhuan{ animation: arry 4s linear infinite; -webkit-animation: arry 4s linear infinite; -moz-animation: arry 4s linear infinite; -ms-animation: arry 4s linear infinite; -o-animation: arry 4s linear infinite; } </style> </head> <body bgcolor="#660000" link="red"> <div class="div"> <div class="div1"> <div class="title">中国好声音</div> <div class="con"> <div class="img"> <img src="image/bg.png" width=300px height=435px alt="小龙" class="zhuan"> </div> <div class="text"> <audio id="audio" src="" controls="controls"></audio> </div> </div> </div> <div class="div2"> <div class="d_tltle"> 本地歌曲 </div> <div class="m_con" > <ul> <li> <i></i> <a href="#" onclick="play('我的好兄弟')">我的好兄弟</a> <span>分享</span> </li> <li> <i></i> <a href="#" onclick="play('朴树 - 平凡之路')">平凡之路</a> <span>分享</span> </li> <li> <i></i> <a href="#" onclick="play('Tank - 三国恋')">Tank - 三国恋</a> <span>分享</span> </li> <li> <i></i> <a href="#" onclick="play('带泪的鱼 - 一个人唱情歌')">一个人唱情歌</a> <span>分享</span> </li> <li> <i></i> <a href="#" onclick="play('许嵩 - 拆东墙')" >许嵩 - 拆东墙</a> <span>分享</span> </li> </ul> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.4.2.min.js"> //导入js官方包 </script> <script> //创建音乐播放器 var audiodom=document.createElement("audio"); function play(str){ //设置音乐地址 audiodom.src="mp3/"+str+".mp3"; //是否自动播放 audiodom.autoplay="autoplay"; } </script> </body> </html>

评论收藏

内容反馈