jquery jplayer实现一个播放列表的音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:jquery jplayer实现一个播放列表的音乐播放器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; } body { background-size: cover; font-family: "Open Sans", sans-serif; background-color: #eee; background-image: url(//repo.bfw.wiki/bfwrepo/images/player/bg.jpg); background-position: center; background-repeat: no-repeat; } .music-player { position: relative; width: 350px; height: 290px; margin: 150px auto; box-shadow: 0 0 60px rgba(0, 0, 0, 0.8); border-radius: 10px; background: #222; overflow: hidden; z-index: 0; } .music-player img { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -1; display: block; width: 100% !important; height: 100% !important; -webkit-filter: blur(2px); filter: blur(2px); } .music-player .info { width: 100%; height: 100px; background: #222; background: rgba(0, 0, 0, 0.8); text-align: center; position: relative; } .music-player .info .jp-playlist li { display: none; } .music-player .info .jp-playlist li a { font-size: 30px; font-weight: 300; text-decoration: none; color: #fff; color: rgba(225, 225, 225, 0.4); } .music-player .info .jp-playlist li a span { font-size: 14px; display: block; margin-top: 10px; } .music-player .info .jp-playlist li.jp-playlist-current { display: block; } .music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove { display: none; } .music-player .info .left, .music-player .info .right { width: 25px; position: absolute; top: 30px; left: 30px; } .music-player .info .right { left: auto; right: 30px; } .music-player .info [class^="icon-"] { margin: 0 0 10px; } .music-player .info .center { padding: 20px 0 0; } .music-player .progress, .music-player .volume-level { width: 100%; height: 5px; display: block; background: #000; position: absolute; bottom: 0px; cursor: pointer; } .music-player .progress span, .music-player .volume-level span { position: relative; display: block; background: #ed553b; width: 0%; height: 5px; } .music-player .progress span:after, .music-player .volume-level span:after { position: absolute; right: -5px; top: -8px; content: ""; width: 10px; height: 22px; background-image: url(//repo.bfw.wiki/bfwrepo/images/player/tsqwz1N.jpg); background-position: center; background-repeat: no-repeat; } .music-player .controls { text-align: center; width: 100%; height: 190px; background: #982e4b; background: rgba(152, 46, 75, 0.6); } .music-player .controls .current { font-size: 48px; color: #fff; color: rgba(225, 225, 225, 0.4); padding: 15px 0 20px; } .music-player .controls .play-controls a { display: inline-block; width: 35px; height: 40px; margin: 0 30px; } .music-player .controls .volume-level { position: relative; bottom: auto; width: 200px; height: 2px; margin: 30px auto 0; background: rgba(225, 225, 225, 0.3); } .music-player .controls .volume-level span { height: 2px; } .music-player .controls .volume-level span:after { right: -11px; top: -8px; width: 22px; height: 22px; background-image: url(//repo.bfw.wiki/bfwrepo/images/player/V5i67V2.png); } .music-player .controls .volume-level a { position: absolute; right: -32px; top: -8px; width: 22px; } .music-player .controls .volume-level a.icon-volume-down { right: auto; left: -25px; } [class^="icon-"] { width: 18px; height: 18px; background: url(//repo.bfw.wiki/bfwrepo/images/player/E09T8tf.png) no-repeat center; display: block; } .icon-shuffle { background-image: url(//repo.bfw.wiki/bfwrepo/images/player/AQAxRxS.png); } .icon-heart { background-image: url(//repo.bfw.wiki/bfwrepo/images/player/E09T8tf.png); } .icon-repeat { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0