黑色侧边悬浮MP3音乐播放器代码

黑色侧边悬浮MP3音乐播放器代码

黑色侧边悬浮MP3音乐播放器代码

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

书写css代码。

.jp-audio :focus, .jp-audio-stream :focus, .jp-video :focus { outline: 0 }

.jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner {

border: 0

}

.jp-audio-stream, .jp-video { /*外框*/

width: 480px; height: 94px; position: fixed; left: -480px; bottom: 20px; z-index: 999; font-size: 16px; font-family: "微软雅黑"; line-height: 1.6; color: #fff; border-radius: 4px; background: #130519de; }

.jp-controls-holder { /*控件区*/

width: 440px; margin: 0 auto; clear: both; overflow: hidden; position: absolute; left: 82px; top: 25px; }

.jp-controls { width: 134px; margin-left: 150px; }

.jp-controls button { display: block; float: left; border-radius: 50%; overflow: hidden; text-indent: -999px; border: none; cursor: pointer; }

/*控件icons*/

.jp-play { width: 40px; height: 40px; background: url(../images/player.png) no-repeat; }

.jp-play:hover { background: url(../images/player.png) -41px 0 no-repeat; }

.jp-state-playing .jp-play { background: url(../images/player.png) 0 -42px no-repeat; }

.jp-state-playing .jp-play:hover { background: url(../images/player.png) -41px -42px no-repeat; }

.jp-next, .jp-previous, .jp-stop { width: 28px; height: 28px; margin-top: 6px; }

.jp-stop { background: url(../images/player.png) 0 -83px no-repeat; margin-left: 10px; }

.jp-stop:hover { background: url(../images/player.png) -29px -83px no-repeat; }

.jp-previous { background: url(../images/player.png) 0 -112px no-repeat; }

.jp-previous:hover { background: url(../images/player.png) -29px -112px no-repeat; }

.jp-next { background: url(../images/player.png) 0 -141px no-repeat; }

.jp-next:hover { background: url(../images/player.png) -29px -141px no-repeat; }

.jp-progress { overflow: hidden; background-color: #ddd; }

.jp-audio .jp-progress { position: absolute; top: 32px; height: 15px; }

.jp-audio .jp-type-single .jp-progress { left: 110px; width: 186px; }

.jp-audio .jp-type-playlist .jp-progress { left: 166px; width: 130px; }

.jp-video .jp-progress { top: 0; left: 0; width: 100%; height: 4px; }

/*进度条*/

.jp-seek-bar { background: url(../images/player.png) 0 -202px repeat-x; width: 0; height: 100%; cursor: pointer; }

.jp-play-bar { background-color: #7E60AD; width: 0; height: 100%; }

.jp-seeking-bg { background: url(../images/player.seeking.gif); }

/*音量控制*/

.jp-volume-controls { width: 100px; position: absolute; top: 32px; left: 260px; }

.jp-video .jp-volume-controls { top: 12px; left: 30px; }

.jp-volume-controls button { display: block; position: absolute; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }

.jp-mute, .jp-volume-max { width: 18px; height: 15px; }

.jp-volume-max { left: 74px; }

.jp-mute { background: url(../images/player.png) 0 -170px no-repeat; }

.jp-mute:hover { background: url(../images/player.png) -19px -170px no-repeat; }

.jp-state-muted .jp-mute { background: url(../images/player.png) -60px -170px no-repeat; }

.jp-state-muted .jp-mute:hover { background: url(../images/player.png) -79px -170px no-repeat; }

.jp-volume-max { background: url(../images/player.png) 0 -186px no-repeat; }

.jp-volume-max:hover { background: url(../images/player.png) -19px -186px no-repeat; }

.jp-volume-bar { position: absolute; overflow: hidden; background-color: #5C4169; top: 6px; left: 20px; width: 50px; height: 3px; cursor: pointer; border-radius: 3px; }

.jp-volume-bar-value { background-color: #6646A1; width: 0; height: 5px }

.jp-audio .jp-time-holder { position: absolute; top: 50px; }

.jp-audio .jp-type-single .jp-time-holder { left: 110px; width: 186px; }

.jp-audio .jp-type-playlist .jp-time-holder { left: 166px; width: 130px; }

.jp-current-time, .jp-duration { width: 60px; font-size: 10px; color: #dadada; }

.jp-current-time { float: left; display: inline; cursor: default; }

.jp-duration { float: right; display: inline; text-align: right; cursor: pointer; }

/*播放时间*/

.jp-video .jp-current-time { font-size: 10px; position: absolute; left: 115px; top: 70px; }

.jp-video .jp-duration { font-size: 10px; position: absolute; right: 35px; top: 70px; }

.jp-details { font-weight: 700; text-align: center; cursor: default; }

.jp-details, .jp-playlist { width: 100%; background-color: #ccc; }

.jp-type-playlist .jp-details, .jp-type-single .jp-details { border-top: none; }

.jp-details .jp-title { margin: 0; padding: 5px 20px; font-size: .72em; font-weight: 700; }

/*播放列表*/

.jp-playlist-box { width: 100%; height: 0px; position: absolute; left: 0; top: 94px; overflow: hidden; }

.jp-playlist ul { list-style-type: none; margin: 0; padding: 0px; font-size: 12px; background: rgba(0, 0, 0, 0.4); width: 100%; height: 200px; position: absolute; left: 0; top: 0px; font-family: "宋体"; }

.jp-playlist li { height: 27px; line-height: 27px; padding: 0 0 0 27px; list-style-type: decimal; list-style-position: inside; }

.jp-playlist li div { display: inline; }

div.jp-type-playlist div.jp-playlist li.jp-playlist-current { background: rgba(0, 0, 0, .4); }

div.jp-type-playlist div.jp-playlist a { color: #7E60AD; font-family: "宋体"; text-decoration: none; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-current, div.jp-type-playlist div.jp-playlist a:hover, div.jp-type-playlist div.jp-playlist li.jp-playlist-current span.jp-artist, div.jp-type-playlist div.jp-playlist a:hover span { color: #665975; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { float: right; display: inline; text-align: right; margin-right: 35px; color: #efefef; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { color: #5C4169; }

span.jp-artist { font-size: 12px; }

/*歌手名*/

/*循环、随机*/

.jp-video .jp-toggles { width: 100px; position: absolute; right: 27px; margin: 10px 0 0; }

.jp-toggles button { display: block; float: left; width: 25px; height: 18px; text-indent: -9999px; line-height: 100%; border: none; cursor: pointer; }

.jp-repeat { background: url(../images/player.png) 0 -290px no-repeat; }

.jp-repeat:hover { background: url(../images/player.png) -30px -290px no-repeat; }

.jp-state-looped .jp-repeat { background: url(../images/player.png) -60px -290px no-repeat; }

.jp-state-looped .jp-repeat:hover { background: url(../images/player.png) -90px -290px no-repeat; }

.jp-shuffle { background: url(../images/player.png) 0 -270px no-repeat; margin-left: 5px; }

.jp-shuffle:hover { background: url(../images/player.png) -30px -270px no-repeat; }

.jp-state-shuffled .jp-shuffle { background: url(../images/player.png) -60px -270px no-repeat; }

.jp-state-shuffled .jp-shuffle:hover { background: url(../images/player.png) -90px -270px no-repeat; }

/*滚动条*/

html, body, header, nav, footer, div, ul, ol, li, p, form, input, a, span, em, i, strong, b, font, img { margin: 0; padding: 0; list-style: none; border: none; }

.jp-video .scrollBar { width: 4px; height: 80px; background: #3A3B3B; position: absolute; right: 0; bottom: 0; border-radius: 4px; display: none; }

.jp-video .scrollBar .bar { width: 4px; height: 25px; background: #6646A1; position: absolute; left: 0; top: 0px; border-radius: 4px; cursor: pointer; }

.jp-video .folded_bt { width: 20px; height: 80px; display: block; position: absolute; right: -20px; top: 5px; border: none; background: #111; cursor: pointer; padding: 0; margin: 0; }

.jp-video .folded_bt span { width: 20px; height: 30px; display: block; background: url(../images/player.png) no-repeat -90px -6px; }

.jp-video .folded_bt:hover span { background-position: -116px -6px; }

#listRemove { width: 20px; height: 20px; display: none; position: absolute; right: 5px; bottom: 2px; cursor: pointer; background: url(../images/player.png) no-repeat -93px -53px; }

#listRemove:hover { background-position: -119px -53px; }

#listClose { width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0px; top: 0; background: url(../images/player.png) no-repeat -88px -85px; }

#listClose:hover { background-position: -115px -85px; }

书写并添加js代码。这些js在网站上可以下载是个js包

代码整体结构。

查看效果。