一款jQuery UI的MP3音乐播放器代码,整体界面比较简洁大方,除了具有正常的播放功能外,还可以设置MP3的下载、收藏和分享等功能,喜欢的童鞋请收下吧。
页面的head部分,需引入播放器样式文件和font-awesome图标字体库,代码如下:
<link type="text/css" rel="stylesheet" href="css/m-details.css" />
<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
页面的body部分,用了多个div容器的嵌套结构,对照演示的样式基本都能看懂,代码如下:
<div class="m-content">
<!--播放器-->
<div class="m-player">
<div class="m-player-details">
<div class="m-title">Take Me to Infinity </div>
<!--效果html开始-->
<div id="player">
<div class="ctrl">
<div class="control">
<div class="left lefticon">
<div class="playback icon"></div>
<a href="#" class="img"></a>
</div>
<div class="timer">0:00</div>
<div class="progress">
<div class="slider">
<div class="loaded"></div>
<div class="pace"></div>
</div>
</div>
<div class="volume right">
<div class="mute icon left"></div>
<div class="slider left">
<div class="pace"></div>
</div>
</div>
</div>
</div>
</div>
<!--歌曲详细内容-->
<div class="m-song-details">
<div class="m-singer">歌手:<span>Consoul Trainin</span></div>
<div class="m-language">语言:<span>英语</span></div>
<div class="m-album">所属专辑:<span>Take Me to Infinity</span></div>
<div class="m-time">发行时间:<span>2016-07-15</span></div>
</div>
<div class="download">
<ul>
<li class="collection"><a href="#">收藏</a></li>
<li class="shared">
<div class="bdsharebuttonbox">
<a href="#" class="share bds_more" data-cmd="more">分享</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
页面的底部,需引入jQuery库、jQuery UI和播放器插件,ginger设置好百度分享的相关参数,代码如下:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/m-details.js"></script>
<!-- 百度分享js -->
<script type="text/javascript">
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["qzone","tsina","weixin","tqq"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791