├── cache └── index.html ├── php.ini ├── favicon.ico ├── images ├── player.png ├── wave.gif ├── history.png ├── player_cover.png ├── icon_list_menu.png └── album_cover_player.png ├── plugns ├── killie │ ├── img │ │ ├── 360.jpg │ │ ├── opera.jpg │ │ ├── top.jpg │ │ ├── chrome.jpg │ │ ├── firefox.jpg │ │ └── safari.jpg │ └── index.html └── layer │ ├── skin │ └── default │ │ ├── icon.png │ │ ├── icon-ext.png │ │ ├── loading-0.gif │ │ ├── loading-1.gif │ │ ├── loading-2.gif │ │ └── layer.css │ ├── mobile │ ├── layer.js │ └── need │ │ └── layer.css │ └── layer.js ├── Dockerfile ├── default.conf ├── README.md ├── js ├── lyric.js ├── background-blur.min.js ├── musicList.js ├── player.js ├── ajax.js └── functions.js ├── css ├── small.css ├── player.css └── jquery.mCustomScrollbar.min.css ├── index.html └── api.php /cache/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /php.ini: -------------------------------------------------------------------------------- 1 | display_errors = Off -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/favicon.ico -------------------------------------------------------------------------------- /images/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/player.png -------------------------------------------------------------------------------- /images/wave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/wave.gif -------------------------------------------------------------------------------- /images/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/history.png -------------------------------------------------------------------------------- /images/player_cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/player_cover.png -------------------------------------------------------------------------------- /images/icon_list_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/icon_list_menu.png -------------------------------------------------------------------------------- /plugns/killie/img/360.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/360.jpg -------------------------------------------------------------------------------- /plugns/killie/img/opera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/opera.jpg -------------------------------------------------------------------------------- /plugns/killie/img/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/top.jpg -------------------------------------------------------------------------------- /images/album_cover_player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/images/album_cover_player.png -------------------------------------------------------------------------------- /plugns/killie/img/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/chrome.jpg -------------------------------------------------------------------------------- /plugns/killie/img/firefox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/firefox.jpg -------------------------------------------------------------------------------- /plugns/killie/img/safari.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/killie/img/safari.jpg -------------------------------------------------------------------------------- /plugns/layer/skin/default/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/layer/skin/default/icon.png -------------------------------------------------------------------------------- /plugns/layer/skin/default/icon-ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/layer/skin/default/icon-ext.png -------------------------------------------------------------------------------- /plugns/layer/skin/default/loading-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/layer/skin/default/loading-0.gif -------------------------------------------------------------------------------- /plugns/layer/skin/default/loading-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/layer/skin/default/loading-1.gif -------------------------------------------------------------------------------- /plugns/layer/skin/default/loading-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oldiy/music-player/HEAD/plugns/layer/skin/default/loading-2.gif -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM php:fpm-alpine 2 | WORKDIR /var/www/html 3 | COPY / /var/www/html/ 4 | RUN apk add --no-cache nginx \ 5 | && mkdir /run/nginx \ 6 | && chown -R www-data:www-data cache/ \ 7 | && mv default.conf /etc/nginx/conf.d \ 8 | && mv php.ini /usr/local/etc/php 9 | 10 | EXPOSE 264 11 | # Persistent config file and cache 12 | VOLUME [ "/var/www/html/cache" ] 13 | 14 | CMD php-fpm & \ 15 | nginx -g "daemon off;" 16 | -------------------------------------------------------------------------------- /default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 264; 3 | index index.html index.php; 4 | location / { 5 | index index.html; 6 | root /var/www/html; 7 | } 8 | 9 | # You may need this to prevent return 404 recursion. 10 | location = /404.html { 11 | internal; 12 | } 13 | #添加php支持 14 | location ~ .php { 15 | fastcgi_pass 127.0.0.1:9000; 16 | fastcgi_index index.php; 17 | fastcgi_param SCRIPT_FILENAME /var/www/html/$fastcgi_script_name; 18 | include fastcgi_params; 19 | } 20 | } 21 | 22 | # 开启gzip 23 | gzip on; 24 | 25 | # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 26 | gzip_min_length 1k; 27 | 28 | # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间 29 | gzip_comp_level 6; 30 | 31 | # 禁用IE 6 gzip 32 | gzip_disable "MSIE [1-6]\."; 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | #Music-player-docker 3 | 4 | [![Docker Pulls](https://img.shields.io/docker/pulls/oldiy/music-player-docker.svg)][dockerhub] 5 | 6 | [dockerhub]: https://hub.docker.com/r/oldiy/music-player-docker 7 | 8 | [![php](https://img.shields.io/badge/php-%3E%3D5.4-blue.svg)](http://php.net/releases/5_4_0.php) 9 | 10 | --- 11 | 12 | 执行命令 13 | 14 | `docker run -d --name music -p 264:264 -v <本机缓存目录>:/var/www/html/cache oldiy/music-player-docker` 15 | 16 | --- 17 | 18 | + [ [群晖安装教程](https://odcn.top/2019/02/12/2494/) ] 19 | 20 | + [ [Blog](https://odcn.top) ] 21 | 22 | + 加入我的Telegram讨论组 [[Join](https://t.me/joinchat/H3IoGkcnW6BGo51EJ9Kw5g)] 23 | 24 | 一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。 25 | 26 | MusicPlayer是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。 前端界面参照QQ音乐网页版进行布局，同时采用了流行的响应式设计，无论是在PC端还是在手机端，均能给您带来原生app般的使用体验。 27 | 28 | --- 29 | 30 | ![](https://odcn.top/wp-content/uploads/2019/02/6-3.jpg) 31 | 32 | --- 33 | 34 | ![](https://odcn.top/wp-content/uploads/2018/11/%E9%BB%91%E5%88%BA%E7%8C%AC%E6%A8%AA150.png) 35 | -------------------------------------------------------------------------------- /plugns/killie/index.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 不支持的浏览器 12 | 13 | 14 | 15 | 16 | 84 | 85 |
86 |
87 |
88 |
89 |
90 | 92 | 93 | 95 | 96 | 98 | 99 | 101 | 102 | 104 | 105 |
106 |
107 |
108 | 109 | -------------------------------------------------------------------------------- /plugns/layer/mobile/layer.js: -------------------------------------------------------------------------------- 1 | /*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */ 2 | ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'

'+(e?n.title[0]:n.title)+"

":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e=''+n.btn[0]+"",2===t&&(e=''+n.btn[1]+""+e),'
'+e+"
"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='

'+(n.content||"")+"

"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"
':"")+'
"+l+'
'+n.content+"
"+c+"
",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o"+str+""); // 显示内容 13 | } 14 | 15 | // 歌曲加载完后的回调函数 16 | // 参数：歌词源文件 17 | function lyricCallback(str, id) { 18 | if(id !== musicList[rem.playlist].item[rem.playid].id) return; // 返回的歌词不是当前这首歌的，跳过 19 | 20 | rem.lyric = parseLyric(str); // 解析获取到的歌词 21 | 22 | if(rem.lyric === '') { 23 | lyricTip('没有歌词'); 24 | return false; 25 | } 26 | 27 | lyricArea.html(''); // 清空歌词区域的内容 28 | lyricArea.scrollTop(0); // 滚动到顶部 29 | 30 | rem.lastLyric = -1; 31 | 32 | // 显示全部歌词 33 | var i = 0; 34 | for(var k in rem.lyric){ 35 | var txt = rem.lyric[k]; 36 | if(!txt) txt = " "; 37 | var li = $("
  • "+txt+"
    • "); 38 | lyricArea.append(li); 39 | i++; 40 | } 41 | } 42 | 43 | // 强制刷新当前时间点的歌词 44 | // 参数：当前播放时间（单位：秒） 45 | function refreshLyric(time) { 46 | if(rem.lyric === '') return false; 47 | 48 | time = parseInt(time); // 时间取整 49 | var i = 0; 50 | for(var k in rem.lyric){ 51 | if(k >= time) break; 52 | i = k; // 记录上一句的 53 | } 54 | 55 | scrollLyric(i); 56 | } 57 | 58 | // 滚动歌词到指定句 59 | // 参数：当前播放时间（单位：秒） 60 | function scrollLyric(time) { 61 | if(rem.lyric === '') return false; 62 | 63 | time = parseInt(time); // 时间取整 64 | 65 | if(rem.lyric === undefined || rem.lyric[time] === undefined) return false; // 当前时间点没有歌词 66 | 67 | if(rem.lastLyric == time) return true; // 歌词没发生改变 68 | 69 | var i = 0; // 获取当前歌词是在第几行 70 | for(var k in rem.lyric){ 71 | if(k == time) break; 72 | i ++; 73 | } 74 | rem.lastLyric = time; // 记录方便下次使用 75 | $(".lplaying").removeClass("lplaying"); // 移除其余句子的正在播放样式 76 | $(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放样式 77 | 78 | var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2); 79 | lyricArea.stop().animate({scrollTop: scroll}, 1000); // 平滑滚动到当前歌词位置(更改这个数值可以改变歌词滚动速度，单位：毫秒) 80 | 81 | } 82 | 83 | // 解析歌词 84 | // 这一函数来自 https://github.com/TivonJJ/html5-music-player 85 | // 参数：原始歌词文件 86 | function parseLyric(lrc) { 87 | if(lrc === '') return ''; 88 | var lyrics = lrc.split("\n"); 89 | var lrcObj = {}; 90 | for(var i=0;i",n[0];);return e>4?e:t}(),n=function(){return"_"+Math.random().toString(36).substr(2,9)},o={svgns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(t,e){var i=document.createElementNS(o.svgns,t);return e&&o.setAttr(i,e),i},setAttr:function(t,e){for(var i in e)"href"===i?t.setAttributeNS(o.xlink,i,e[i]):t.setAttribute(i,e[i]);return t}},r=function(e,i){this.internalID=n(),this.$element=t(e),this.$width=this.$element.width(),this.$height=this.$element.height(),this.element=e,this.options=t.extend({},r.DEFAULTS,i),this.$overlayEl=this.createOverlay(),this.$blurredImage={},this.useVelocity=this.detectVelocity(),this.attachListeners(),this.generateBlurredImage(this.options.imageURL)};r.VERSION="0.0.1",r.DEFAULTS={imageURL:"",blurAmount:10,imageClass:"",overlayClass:"",duration:!1,opacity:1},r.prototype.detectVelocity=function(){return!!window.jQuery.Velocity},r.prototype.attachListeners=function(){this.$element.on("ui.blur.loaded",t.proxy(this.fadeIn,this)),this.$element.on("ui.blur.unload",t.proxy(this.fadeOut,this))},r.prototype.fadeIn=function(){this.options.duration&&this.options.duration>0&&(this.useVelocity?this.$blurredImage.velocity({opacity:this.options.opacity},{duration:this.options.duration}):this.$blurredImage.animate({opacity:this.options.opacity},{duration:this.options.duration}))},r.prototype.fadeOut=function(){this.options.duration&&this.options.duration>0?this.useVelocity?this.$blurredImage.velocity({opacity:0},{duration:this.options.duration}):this.$blurredImage.animate({opacity:0},{duration:this.options.duration}):this.$blurredImage.css({opacity:0})},r.prototype.generateBlurredImage=function(t){var e=this.$blurredImage;this.internalID=n(),e.length>0&&(this.options.duration&&this.options.duration>0?this.useVelocity?e.first().velocity({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.first().animate({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.remove()),this.$blurredImage=i?this.createIMG(t,this.$width,this.$height):this.createSVG(t,this.$width,this.$height)},r.prototype.createOverlay=function(){return this.options.overlayClass&&""!==this.options.overlayClass?t("
    ").prependTo(this.$element).addClass(this.options.overlayClass):!1},r.prototype.createSVG=function(e,i,n){var r=this,s=o.createElement("svg",{xmlns:o.svgns,version:"1.1",width:i,height:n,id:"blurred"+this.internalID,"class":this.options.imageClass,viewBox:"0 0 "+i+" "+n,preserveAspectRatio:"none"}),a="blur"+this.internalID,u=o.createElement("filter",{id:a}),l=o.createElement("feGaussianBlur",{"in":"SourceGraphic",stdDeviation:this.options.blurAmount}),h=o.createElement("image",{x:0,y:0,width:i,height:n,externalResourcesRequired:"true",href:e,style:"filter:url(#"+a+")",preserveAspectRatio:"none"});h.addEventListener("load",function(){r.$element.trigger("ui.blur.loaded")},!0),h.addEventListener("SVGLoad",function(){r.$element.trigger("ui.blur.loaded")},!0),u.appendChild(l),s.appendChild(u),s.appendChild(h);var d=t(s);return r.options.duration&&r.options.duration>0&&(d.css({opacity:0}),window.setTimeout(function(){"0"===d.css("opacity")&&d.css({opacity:1})},this.options.duration+100)),this.element.insertBefore(s,this.element.firstChild),d},r.prototype.createIMG=function(t,e,i){var n=this,o=this.prependImage(t),r=2*this.options.blurAmount>100?100:2*this.options.blurAmount;return o.css({filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius="+r+") ",top:2.5*-this.options.blurAmount,left:2.5*-this.options.blurAmount,width:e+2.5*this.options.blurAmount,height:i+2.5*this.options.blurAmount}).attr("id","blurred"+this.internalID),o.load(function(){n.$element.trigger("ui.blur.loaded")}),this.options.duration&&this.options.duration>0&&window.setTimeout(function(){"0"===o.css("opacity")&&o.css({opacity:1})},this.options.duration+100),o},r.prototype.prependImage=function(e){var i,n=t('');return i=this.$overlayEl?n.insertBefore(this.$overlayEl).attr("id",this.internalID).addClass(this.options.imageClass):n.prependTo(this.$element).attr("id",this.internalID).addClass(this.options.imageClass)};var s=t.fn.backgroundBlur;t.fn.backgroundBlur=e,t.fn.backgroundBlur.Constructor=r,t.fn.backgroundBlur.noConflict=function(){return t.fn.backgroundBlur=s,this}}(jQuery); -------------------------------------------------------------------------------- /plugns/layer/mobile/need/layer.css: -------------------------------------------------------------------------------- 1 | .layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} -------------------------------------------------------------------------------- /js/musicList.js: -------------------------------------------------------------------------------- 1 | /************************************************** 2 | * MKOnlinePlayer v2.32 3 | * 播放列表配置模块 4 | * 编写：mengkun(http://mkblog.cn) 5 | * 时间：2017-9-15 6 | *************************************************/ 7 | // 建议修改前先备份一下 8 | // 获取 歌曲的网易云音乐ID 或 网易云歌单ID 的方法： 9 | // 先在 js/player.js 中开启调试模式，然后按 F12 打开浏览器的控制台。播放歌曲或点开歌单即可看到相应信息 10 | 11 | var musicList = [ 12 | // 以下三个系统预留列表请勿更改，否则可能导致程序无法正常运行！ 13 | // 预留列表：搜索结果 14 | { 15 | name: "搜索结果", // 播放列表名字 16 | cover: "", // 播放列表封面 17 | creatorName: "", // 列表创建者名字 18 | creatorAvatar: "", // 列表创建者头像 19 | item: [] 20 | }, 21 | // 预留列表：正在播放 22 | { 23 | name: "正在播放", // 播放列表名字 24 | cover: "", // 播放列表封面 25 | creatorName: "", // 列表创建者名字 26 | creatorAvatar: "", // 列表创建者头像 27 | item: [] 28 | }, 29 | // 预留列表：播放历史 30 | { 31 | name: "播放历史", // 播放列表名字 32 | cover: "images/history.png", // 播放列表封面 33 | creatorName: "", // 列表创建者名字 34 | creatorAvatar: "", // 列表创建者头像 35 | item: [] 36 | }, 37 | // 以上三个系统预留列表请勿更改，否则可能导致程序无法正常运行！ 38 | //********************************************* 39 | // 自定义列表开始，您可以自由添加您的自定义列表 40 | { 41 | id: 3778678 // 云音乐热歌榜 42 | }, 43 | { 44 | id: 3779629 // 云音乐新歌榜 45 | }, 46 | { 47 | id: 4395559 // 华语金曲榜 48 | }, 49 | { 50 | id: 64016 // 中国TOP排行榜（内地榜） 51 | }, 52 | { 53 | id: 112504 // 中国TOP排行榜（港台榜） 54 | }, 55 | { 56 | id: 19723756 // 云音乐飙升榜 57 | }, 58 | { 59 | id: 2884035 // "网易原创歌曲榜" 60 | }, 61 | // 自定义列表教程开始！ 62 | // 方式一：手动创建列表并添加歌曲信息 63 | // 温馨提示：各大音乐平台获取到的外链有效期均较短，因此 url 值应该设置为空，以让程序临时抓取 64 | { 65 | name: "自定义列表", // 播放列表名字 66 | cover: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 播放列表封面图像 67 | creatorName: "", // 列表创建者名字(暂时没用到，可空) 68 | creatorAvatar: "", // 列表创建者头像(暂时没用到，可空) 69 | item: [ // 这里面放歌曲 70 | { 71 | id: "436514312", // 音乐ID 72 | name: "成都", // 音乐名字 73 | artist: "赵雷", // 艺术家名字 74 | album: "成都", // 专辑名字 75 | source: "netease", // 音乐来源 76 | url_id: "436514312", // 链接ID 77 | pic_id: "2946691234868155", // 封面ID 78 | lyric_id: "436514312", // 歌词ID 79 | pic: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 专辑图片 80 | url: "" // mp3链接（此项建议不填，除非你有该歌曲的比较稳定的外链） 81 | }, 82 | // 下面演示插入各个平台的音乐。。。 83 | { 84 | id: "65528", 85 | name: "淘汰", 86 | artist: "陈奕迅", 87 | album: "认了吧", 88 | source: "netease", // 网易云 89 | url_id: "65528", 90 | pic_id: "18782957139233959", 91 | lyric_id: "65528", 92 | pic: "https://p3.music.126.net/BFuOepLmD63tY75UJs1c0Q==/18872017579169120.jpg", 93 | url: "" 94 | }, 95 | { 96 | id: "001JD1SR29d1hS", 97 | name: "特别的爱给特别的你", 98 | artist: "伍思凯", 99 | album: "特别的爱给特别的你", 100 | source: "tencent", // 腾讯 101 | url_id: "001JD1SR29d1hS", 102 | pic_id: "004DYsvN2QCYcj", 103 | lyric_id: "001JD1SR29d1hS", 104 | pic: "https://y.gtimg.cn/music/photo_new/T002R300x300M000004DYsvN2QCYcj.jpg?max_age=2592000", 105 | url: "" // 腾讯的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取 106 | }, 107 | { 108 | id: "81175", 109 | name: "让我欢喜让我忧", 110 | artist: "周华健", 111 | album: "让我欢喜让我忧", 112 | source: "xiami", // 虾米 113 | url_id: "81175", 114 | pic_id: "81175", 115 | lyric_id: "81175", 116 | pic: "https://pic.xiami.net/images/album/img58/1258/66271400572139.jpg@300h_300w_100q_1c.jpg", 117 | url: "" // 虾米的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取 118 | }, 119 | { 120 | id: "2a24dea6c74884195fe5b9732fd95ca8", 121 | name: "小幸运", 122 | artist: "金玟岐", 123 | album: "金玟岐翻唱作品集", 124 | source: "kugou", // 酷狗 125 | url_id: "2a24dea6c74884195fe5b9732fd95ca8", 126 | pic_id: "2a24dea6c74884195fe5b9732fd95ca8", 127 | lyric_id: "2a24dea6c74884195fe5b9732fd95ca8", 128 | pic: "http://singerimg.kugou.com/uploadpic/softhead/400/20161226/20161226105135733.jpg", 129 | url: "" // 酷狗的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取 130 | }, 131 | { 132 | id: "121004737", 133 | name: "难忘今宵", 134 | artist: "李谷一", 135 | album: "难忘今宵", 136 | source: "baidu", // 百度 137 | url_id: "121004737", 138 | pic_id: "121004737", 139 | lyric_id: "121004737", 140 | pic: "http://musicdata.baidu.com/data2/pic/2733cd9816b8618afd3038d5d9444940/266105319/266105319.jpg@s_0,w_150", 141 | url: "" // 百度的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取 142 | } // 列表中最后一首歌大括号后面不要加逗号 143 | ] 144 | }, 145 | // 方式二：直接提供网易云歌单ID 146 | { 147 | id: 440103454 // 网易云歌单ID 148 | } // 播放列表的最后一项大括号后面不要加逗号 149 | ]; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | MusicPlayer v2.4 22 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
    51 | 52 | 53 |
    54 | 57 |
    58 | 59 | 60 |
    61 |
    62 |
    63 | 64 |
    65 | 66 | 正在播放 67 | 播放列表 68 | 歌曲搜索 69 |
    70 |
    71 | 72 |
    73 | 74 | 75 | 76 | 77 |
    78 |
    79 | 80 | 81 |
    82 | 83 |
    84 | 85 |
    86 | 87 |
    88 |
      89 |
      90 |
      91 |
      92 |
      93 |
      94 | 95 | 96 |
      97 |
      98 |
      99 | 100 | 101 | 102 | 103 |
      104 | 105 |
      106 |
      107 | 108 |
      109 |
      110 |
      111 |
      112 |
      113 |
      114 |
      115 | 116 |
      117 |
      118 |
      119 |
      120 |
      121 |
      122 |
      123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /api.php: -------------------------------------------------------------------------------- 1 | format(true); // 启用格式化功能 49 | 50 | if($source == 'kugou' || $source == 'baidu') { 51 | define('NO_HTTPS', true); // 酷狗和百度音乐源暂不支持 https 52 | } elseif(($source == 'netease') && $netease_cookie) { 53 | $API->cookie($netease_cookie); // 解决网易云 Cookie 失效 54 | } 55 | 56 | // 没有缓存文件夹则创建 57 | if(defined('CACHE_PATH') && !is_dir(CACHE_PATH)) createFolders(CACHE_PATH); 58 | 59 | $types = getParam('types'); 60 | switch($types) // 根据请求的 Api，执行相应操作 61 | { 62 | case 'url': // 获取歌曲链接 63 | $id = getParam('id'); // 歌曲ID 64 | 65 | $data = $API->url($id); 66 | 67 | echojson($data); 68 | break; 69 | 70 | case 'pic': // 获取歌曲链接 71 | $id = getParam('id'); // 歌曲ID 72 | 73 | $data = $API->pic($id); 74 | 75 | echojson($data); 76 | break; 77 | 78 | case 'lyric': // 获取歌词 79 | $id = getParam('id'); // 歌曲ID 80 | 81 | if(($source == 'netease') && defined('CACHE_PATH')) { 82 | $cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; 83 | 84 | if(file_exists($cache)) { // 缓存存在，则读取缓存 85 | $data = file_get_contents($cache); 86 | } else { 87 | $data = $API->lyric($id); 88 | 89 | // 只缓存链接获取成功的歌曲 90 | if(json_decode($data)->lyric !== '') { 91 | file_put_contents($cache, $data); 92 | } 93 | } 94 | } else { 95 | $data = $API->lyric($id); 96 | } 97 | 98 | echojson($data); 99 | break; 100 | 101 | case 'download': // 下载歌曲(弃用) 102 | $fileurl = getParam('url'); // 链接 103 | 104 | header('location:$fileurl'); 105 | exit(); 106 | break; 107 | 108 | case 'userlist': // 获取用户歌单列表 109 | $uid = getParam('uid'); // 用户ID 110 | 111 | $url= 'http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid='.$uid; 112 | $data = file_get_contents($url); 113 | 114 | echojson($data); 115 | break; 116 | 117 | case 'playlist': // 获取歌单中的歌曲 118 | $id = getParam('id'); // 歌单ID 119 | 120 | if(($source == 'netease') && defined('CACHE_PATH')) { 121 | $cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; 122 | 123 | if(file_exists($cache) && (date("Ymd", filemtime($cache)) == date("Ymd"))) { // 缓存存在，则读取缓存 124 | $data = file_get_contents($cache); 125 | } else { 126 | $data = $API->format(false)->playlist($id); 127 | 128 | // 只缓存链接获取成功的歌曲 129 | if(isset(json_decode($data)->playlist->tracks)) { 130 | file_put_contents($cache, $data); 131 | } 132 | } 133 | } else { 134 | $data = $API->format(false)->playlist($id); 135 | } 136 | 137 | echojson($data); 138 | break; 139 | 140 | case 'search': // 搜索歌曲 141 | $s = getParam('name'); // 歌名 142 | $limit = getParam('count', 20); // 每页显示数量 143 | $pages = getParam('pages', 1); // 页码 144 | 145 | $data = $API->search($s, [ 146 | 'page' => $pages, 147 | 'limit' => $limit 148 | ]); 149 | 150 | echojson($data); 151 | break; 152 | 153 | default: 154 | echo '信息

      MKOnlinePlayer

      Github: https://github.com/mengkunsoft/MKOnlineMusicPlayer


      '; 155 | if(!defined('DEBUG') || DEBUG !== true) { // 非调试模式 156 | echo '

      Api 调试模式已关闭

      '; 157 | } else { 158 | echo '

      您已开启 Api 调试功能，正常使用时请在 api.php 中关闭该选项！


      '; 159 | 160 | echo '

      PHP 版本：'.phpversion().' （本程序要求 PHP 5.4+）


      '; 161 | 162 | echo '

      服务器函数检查

      '; 163 | echo '

      curl_exec: '.checkfunc('curl_exec',true).' （用于获取音乐数据）

      '; 164 | echo '

      file_get_contents: '.checkfunc('file_get_contents',true).' （用于获取音乐数据）

      '; 165 | echo '

      json_decode: '.checkfunc('json_decode',true).' （用于后台数据格式化）

      '; 166 | echo '

      hex2bin: '.checkfunc('hex2bin',true).' （用于数据解析）

      '; 167 | echo '

      openssl_encrypt: '.checkfunc('openssl_encrypt',true).' （用于数据解析）

      '; 168 | } 169 | 170 | echo ''; 171 | } 172 | 173 | /** 174 | * 创建多层文件夹 175 | * @param $dir 路径 176 | */ 177 | function createFolders($dir) { 178 | return is_dir($dir) or (createFolders(dirname($dir)) and mkdir($dir, 0755)); 179 | } 180 | 181 | /** 182 | * 检测服务器函数支持情况 183 | * @param $f 函数名 184 | * @param $m 是否为必须函数 185 | * @return 186 | */ 187 | function checkfunc($f,$m = false) { 188 | if (function_exists($f)) { 189 | return '可用'; 190 | } else { 191 | if ($m == false) { 192 | return '不支持'; 193 | } else { 194 | return '不支持'; 195 | } 196 | } 197 | } 198 | 199 | /** 200 | * 获取GET或POST过来的参数 201 | * @param $key 键值 202 | * @param $default 默认值 203 | * @return 获取到的内容（没有则为默认值） 204 | */ 205 | function getParam($key, $default='') 206 | { 207 | return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default); 208 | } 209 | 210 | /** 211 | * 输出一个json或jsonp格式的内容 212 | * @param $data 数组内容 213 | */ 214 | function echojson($data) //json和jsonp通用 215 | { 216 | header('Content-type: application/json'); 217 | $callback = getParam('callback'); 218 | 219 | if(defined('HTTPS') && HTTPS === true && !defined('NO_HTTPS')) { // 替换链接为 https 220 | $data = str_replace('http:\/\/', 'https:\/\/', $data); 221 | $data = str_replace('http://', 'https://', $data); 222 | } 223 | 224 | if($callback) //输出jsonp格式 225 | { 226 | die(htmlspecialchars($callback).'('.$data.')'); 227 | } else { 228 | die($data); 229 | } 230 | } -------------------------------------------------------------------------------- /plugns/layer/skin/default/layer.css: -------------------------------------------------------------------------------- 1 | .layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span,.layui-layer-title{text-overflow:ellipsis;white-space:nowrap}*html{background-image:url(about:blank);background-attachment:fixed}html #layuicss-skinlayercss{display:none;position:absolute;width:1989px}.layui-layer,.layui-layer-shade{position:fixed;_position:absolute;pointer-events:auto}.layui-layer-shade{top:0;left:0;width:100%;height:100%;_height:expression(document.body.offsetHeight+"px")}.layui-layer{-webkit-overflow-scrolling:touch;top:150px;left:0;margin:0;padding:0;background-color:#fff;-webkit-background-clip:content;box-shadow:1px 1px 50px rgba(0,0,0,.3)}.layui-layer-close{position:absolute}.layui-layer-content{position:relative}.layui-layer-border{border:1px solid #B2B2B2;border:1px solid rgba(0,0,0,.1);box-shadow:1px 1px 5px rgba(0,0,0,.2)}.layui-layer-load{background:url(loading-1.gif) center center no-repeat #eee}.layui-layer-ico{background:url(icon.png) no-repeat}.layui-layer-btn a,.layui-layer-dialog .layui-layer-ico,.layui-layer-setwin a{display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-move{display:none;position:fixed;*position:absolute;left:0;top:0;width:100%;height:100%;cursor:move;opacity:0;filter:alpha(opacity=0);background-color:#fff;z-index:2147483647}.layui-layer-resize{position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.layui-layer{border-radius:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.3s;animation-duration:.3s}@-webkit-keyframes layer-bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layer-bounceIn{0%{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim{-webkit-animation-name:layer-bounceIn;animation-name:layer-bounceIn}@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown}@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft}@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn}@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layui-layer-title{padding:0 80px 0 20px;height:42px;line-height:42px;border-bottom:1px solid #eee;font-size:14px;color:#333;overflow:hidden;background-color:#F8F8F8;border-radius:2px 2px 0 0}.layui-layer-setwin{position:absolute;right:15px;*right:0;top:15px;font-size:0;line-height:initial}.layui-layer-setwin a{position:relative;width:16px;height:16px;margin-left:10px;font-size:12px;_overflow:hidden}.layui-layer-setwin .layui-layer-min cite{position:absolute;width:14px;height:2px;left:0;top:50%;margin-top:-1px;background-color:#2E2D3C;cursor:pointer;_overflow:hidden}.layui-layer-setwin .layui-layer-min:hover cite{background-color:#2D93CA}.layui-layer-setwin .layui-layer-max{background-position:-32px -40px}.layui-layer-setwin .layui-layer-max:hover{background-position:-16px -40px}.layui-layer-setwin .layui-layer-maxmin{background-position:-65px -40px}.layui-layer-setwin .layui-layer-maxmin:hover{background-position:-49px -40px}.layui-layer-setwin .layui-layer-close1{background-position:1px -40px;cursor:pointer}.layui-layer-setwin .layui-layer-close1:hover{opacity:.7}.layui-layer-setwin .layui-layer-close2{position:absolute;right:-28px;top:-28px;width:30px;height:30px;margin-left:0;background-position:-149px -31px;*right:-18px;_display:none}.layui-layer-setwin .layui-layer-close2:hover{background-position:-180px -31px}.layui-layer-btn{text-align:right;padding:0 10px 12px;pointer-events:auto;user-select:none;-webkit-user-select:none}.layui-layer-btn a{height:28px;line-height:28px;margin:6px 6px 0;padding:0 15px;border:1px solid #dedede;background-color:#f1f1f1;color:#333;border-radius:2px;font-weight:400;cursor:pointer;text-decoration:none}.layui-layer-btn a:hover{opacity:.9;text-decoration:none}.layui-layer-btn a:active{opacity:.8}.layui-layer-btn .layui-layer-btn0{border-color:#4898d5;background-color:#2e8ded;color:#fff}.layui-layer-btn-l{text-align:left}.layui-layer-btn-c{text-align:center}.layui-layer-dialog{min-width:260px}.layui-layer-dialog .layui-layer-content{position:relative;padding:20px;line-height:24px;word-break:break-all;overflow:hidden;font-size:14px;overflow-x:hidden;overflow-y:auto}.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute;top:16px;left:15px;_left:-40px;width:30px;height:30px}.layui-layer-ico1{background-position:-30px 0}.layui-layer-ico2{background-position:-60px 0}.layui-layer-ico3{background-position:-90px 0}.layui-layer-ico4{background-position:-120px 0}.layui-layer-ico5{background-position:-150px 0}.layui-layer-ico6{background-position:-180px 0}.layui-layer-rim{border:6px solid #8D8D8D;border:6px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:none}.layui-layer-msg{min-width:180px;border:1px solid #D3D4D3;box-shadow:none}.layui-layer-hui{min-width:100px;background-color:#000;filter:alpha(opacity=60);background-color:rgba(0,0,0,.6);color:#fff;border:none}.layui-layer-hui .layui-layer-content{padding:12px 25px;text-align:center}.layui-layer-dialog .layui-layer-padding{padding:20px 20px 20px 55px;text-align:left}.layui-layer-page .layui-layer-content{position:relative;overflow:auto}.layui-layer-iframe .layui-layer-btn,.layui-layer-page .layui-layer-btn{padding-top:10px}.layui-layer-nobg{background:0 0}.layui-layer-iframe iframe{display:block;width:100%}.layui-layer-loading{border-radius:100%;background:0 0;box-shadow:none;border:none}.layui-layer-loading .layui-layer-content{width:60px;height:24px;background:url(loading-0.gif) no-repeat}.layui-layer-loading .layui-layer-loading1{width:37px;height:37px;background:url(loading-1.gif) no-repeat}.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2{width:32px;height:32px;background:url(loading-2.gif) no-repeat}.layui-layer-tips{background:0 0;box-shadow:none;border:none}.layui-layer-tips .layui-layer-content{position:relative;line-height:22px;min-width:12px;padding:5px 10px;font-size:12px;_float:left;border-radius:2px;box-shadow:1px 1px 3px rgba(0,0,0,.2);background-color:#000;color:#fff}.layui-layer-tips .layui-layer-close{right:-2px;top:-1px}.layui-layer-tips i.layui-layer-TipsG{position:absolute;width:0;height:0;border-width:8px;border-color:transparent;border-style:dashed;*overflow:hidden}.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{left:5px;border-right-style:solid;border-right-color:#000}.layui-layer-tips i.layui-layer-TipsT{bottom:-8px}.layui-layer-tips i.layui-layer-TipsB{top:-8px}.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{top:1px;border-bottom-style:solid;border-bottom-color:#000}.layui-layer-tips i.layui-layer-TipsR{left:-8px}.layui-layer-tips i.layui-layer-TipsL{right:-8px}.layui-layer-lan[type=dialog]{min-width:280px}.layui-layer-lan .layui-layer-title{background:#4476A7;color:#fff;border:none}.layui-layer-lan .layui-layer-btn{padding:5px 10px 10px;text-align:right;border-top:1px solid #E9E7E7}.layui-layer-lan .layui-layer-btn a{background:#BBB5B5;border:none}.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5}.layui-layer-molv .layui-layer-title{background:#009f95;color:#fff;border:none}.layui-layer-molv .layui-layer-btn a{background:#009f95}.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1}.layui-layer-iconext{background:url(icon-ext.png) no-repeat}.layui-layer-prompt .layui-layer-input{display:block;width:220px;height:30px;margin:0 auto;line-height:30px;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,.1) inset;color:#333}.layui-layer-prompt textarea.layui-layer-input{width:300px;height:100px;line-height:20px}.layui-layer-prompt .layui-layer-content{padding:20px}.layui-layer-prompt .layui-layer-btn{padding-top:0}.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{padding-left:0;border-bottom:1px solid #ccc;background-color:#eee;overflow:visible}.layui-layer-tab .layui-layer-title span{position:relative;float:left;min-width:80px;max-width:260px;padding:0 20px;text-align:center;cursor:default;overflow:hidden}.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{height:43px;border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff;z-index:10}.layui-layer-tab .layui-layer-title span:first-child{border-left:none}.layui-layer-tabmain{line-height:24px;clear:both}.layui-layer-tabmain .layui-layer-tabli{display:none}.layui-layer-tabmain .layui-layer-tabli.xubox_tab_layer{display:block}.xubox_tabclose{position:absolute;right:10px;top:5px;cursor:pointer}.layui-layer-photos{-webkit-animation-duration:.8s;animation-duration:.8s}.layui-layer-photos .layui-layer-content{overflow:hidden;text-align:center}.layui-layer-photos .layui-layer-phimg img{position:relative;width:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-imgbar,.layui-layer-imguide{display:none}.layui-layer-imgnext,.layui-layer-imgprev{position:absolute;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;blr:expression(this.onFocus=this.blur())}.layui-layer-imgprev{left:10px;background-position:-5px -5px;_background-position:-70px -5px}.layui-layer-imgprev:hover{background-position:-33px -5px;_background-position:-120px -5px}.layui-layer-imgnext{right:10px;_right:8px;background-position:-5px -50px;_background-position:-70px -50px}.layui-layer-imgnext:hover{background-position:-33px -50px;_background-position:-120px -50px}.layui-layer-imgbar{position:absolute;left:0;bottom:0;width:100%;height:32px;line-height:32px;background-color:rgba(0,0,0,.8);background-color:#000\9;filter:Alpha(opacity=80);color:#fff;overflow:hidden;font-size:0}.layui-layer-imgtit *{display:inline-block;*display:inline;*zoom:1;vertical-align:top;font-size:12px}.layui-layer-imgtit a{max-width:65%;overflow:hidden;color:#fff}.layui-layer-imgtit a:hover{color:#fff;text-decoration:underline}.layui-layer-imgtit em{padding-left:10px;font-style:normal}@-webkit-keyframes layer-bounceOut{100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes layer-bounceOut{100%{opacity:0;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim-close{-webkit-animation-name:layer-bounceOut;animation-name:layer-bounceOut;-webkit-animation-duration:.2s;animation-duration:.2s}@media screen and (max-width:1100px){.layui-layer-iframe{overflow-y:auto;-webkit-overflow-scrolling:touch}} -------------------------------------------------------------------------------- /js/player.js: -------------------------------------------------------------------------------- 1 | /************************************************** 2 | * MKOnlinePlayer v2.41 3 | * 播放器主功能模块 4 | * 编写：mengkun(https://mkblog.cn) 5 | * 时间：2018-3-13 6 | *************************************************/ 7 | // 播放器功能配置 8 | var mkPlayer = { 9 | api: "api.php", // api地址 10 | loadcount: 20, // 搜索结果一次加载多少条 11 | method: "POST", // 数据传输方式(POST/GET) 12 | defaultlist: 3, // 默认要显示的播放列表编号 13 | autoplay: false, // 是否自动播放(true/false) *此选项在移动端可能无效 14 | coverbg: true, // 是否开启封面背景(true/false) *开启后会有些卡 15 | mcoverbg: true, // 是否开启[移动端]封面背景(true/false) 16 | dotshine: true, // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡 17 | mdotshine: false, // 是否开启[移动端]播放进度条的小点闪动效果[不支持IE](true/false) 18 | volume: 0.6, // 默认音量值(0~1之间) 19 | version: "v2.41", // 播放器当前版本号(仅供调试) 20 | debug: false // 是否开启调试模式(true/false) 21 | }; 22 | 23 | 24 | 25 | /******************************************************* 26 | * 以下内容是播放器核心文件，不建议进行修改，否则可能导致播放器无法正常使用! 27 | * 28 | * 哈哈，吓唬你的！想改就改呗！不过建议修改之前先【备份】,要不然改坏了弄不好了。 29 | ******************************************************/ 30 | 31 | // 存储全局变量 32 | var rem = []; 33 | 34 | // 音频错误处理函数 35 | function audioErr() { 36 | // 没播放过，直接跳过 37 | if(rem.playlist === undefined) return true; 38 | 39 | if(rem.errCount > 10) { // 连续播放失败的歌曲过多 40 | layer.msg('似乎出了点问题~播放已停止'); 41 | rem.errCount = 0; 42 | } else { 43 | rem.errCount++; // 记录连续播放失败的歌曲数目 44 | layer.msg('当前歌曲播放失败，自动播放下一首'); 45 | nextMusic(); // 切换下一首歌 46 | } 47 | } 48 | 49 | // 点击暂停按钮的事件 50 | function pause() { 51 | if(rem.paused === false) { // 之前是播放状态 52 | rem.audio[0].pause(); // 暂停 53 | } else { 54 | // 第一次点播放 55 | if(rem.playlist === undefined) { 56 | rem.playlist = rem.dislist; 57 | 58 | musicList[1].item = musicList[rem.playlist].item; // 更新正在播放列表中音乐 59 | 60 | // 正在播放 列表项已发生变更，进行保存 61 | playerSavedata('playing', musicList[1].item); // 保存正在播放列表 62 | 63 | listClick(0); 64 | } 65 | rem.audio[0].play(); 66 | } 67 | } 68 | 69 | // 循环顺序 70 | function orderChange() { 71 | var orderDiv = $(".btn-order"); 72 | orderDiv.removeClass(); 73 | switch(rem.order) { 74 | case 1: // 单曲循环 -> 列表循环 75 | orderDiv.addClass("player-btn btn-order btn-order-list"); 76 | orderDiv.attr("title", "列表循环"); 77 | layer.msg("列表循环"); 78 | rem.order = 2; 79 | break; 80 | 81 | case 3: // 随机播放 -> 单曲循环 82 | orderDiv.addClass("player-btn btn-order btn-order-single"); 83 | orderDiv.attr("title", "单曲循环"); 84 | layer.msg("单曲循环"); 85 | rem.order = 1; 86 | break; 87 | 88 | // case 2: 89 | default: // 列表循环(其它) -> 随机播放 90 | orderDiv.addClass("player-btn btn-order btn-order-random"); 91 | orderDiv.attr("title", "随机播放"); 92 | layer.msg("随机播放"); 93 | rem.order = 3; 94 | } 95 | } 96 | 97 | // 播放 98 | function audioPlay() { 99 | rem.paused = false; // 更新状态（未暂停） 100 | refreshList(); // 刷新状态，显示播放的波浪 101 | $(".btn-play").addClass("btn-state-paused"); // 恢复暂停 102 | 103 | if((mkPlayer.dotshine === true && !rem.isMobile) || (mkPlayer.mdotshine === true && rem.isMobile)) { 104 | $("#music-progress .mkpgb-dot").addClass("dot-move"); // 小点闪烁效果 105 | } 106 | 107 | var music = musicList[rem.playlist].item[rem.playid]; // 获取当前播放的歌曲信息 108 | var msg = " 正在播放: " + music.name + " - " + music.artist; // 改变浏览器标题 109 | 110 | // 清除定时器 111 | if (rem.titflash !== undefined ) 112 | { 113 | clearInterval(rem.titflash); 114 | } 115 | // 标题滚动 116 | titleFlash(msg); 117 | } 118 | // 标题滚动 119 | function titleFlash(msg) { 120 | 121 | // 截取字符 122 | var tit = function() { 123 | msg = msg.substring(1,msg.length)+ msg.substring(0,1); 124 | document.title = msg; 125 | }; 126 | // 设置定时间 300ms滚动 127 | rem.titflash = setInterval(function(){tit()}, 300); 128 | } 129 | // 暂停 130 | function audioPause() { 131 | rem.paused = true; // 更新状态（已暂停） 132 | 133 | $(".list-playing").removeClass("list-playing"); // 移除其它的正在播放 134 | 135 | $(".btn-play").removeClass("btn-state-paused"); // 取消暂停 136 | 137 | $("#music-progress .dot-move").removeClass("dot-move"); // 小点闪烁效果 138 | 139 | // 清除定时器 140 | if (rem.titflash !== undefined ) 141 | { 142 | clearInterval(rem.titflash); 143 | } 144 | document.title = rem.webTitle; // 改变浏览器标题 145 | } 146 | 147 | // 播放上一首歌 148 | function prevMusic() { 149 | playList(rem.playid - 1); 150 | } 151 | 152 | // 播放下一首歌 153 | function nextMusic() { 154 | switch (rem.order ? rem.order : 1) { 155 | case 1,2: 156 | playList(rem.playid + 1); 157 | break; 158 | case 3: 159 | if (musicList[1] && musicList[1].item.length) { 160 | var id = parseInt(Math.random() * musicList[1].item.length); 161 | playList(id); 162 | } 163 | break; 164 | default: 165 | playList(rem.playid + 1); 166 | break; 167 | } 168 | } 169 | // 自动播放时的下一首歌 170 | function autoNextMusic() { 171 | if(rem.order && rem.order === 1) { 172 | playList(rem.playid); 173 | } else { 174 | nextMusic(); 175 | } 176 | } 177 | 178 | // 歌曲时间变动回调函数 179 | function updateProgress(){ 180 | // 暂停状态不管 181 | if(rem.paused !== false) return true; 182 | // 同步进度条 183 | music_bar.goto(rem.audio[0].currentTime / rem.audio[0].duration); 184 | // 同步歌词显示 185 | scrollLyric(rem.audio[0].currentTime); 186 | } 187 | 188 | // 显示的列表中的某一项点击后的处理函数 189 | // 参数：歌曲在列表中的编号 190 | function listClick(no) { 191 | // 记录要播放的歌曲的id 192 | var tmpid = no; 193 | 194 | // 调试信息输出 195 | if(mkPlayer.debug) { 196 | console.log("点播了列表中的第 " + (no + 1) + " 首歌 " + musicList[rem.dislist].item[no].name); 197 | } 198 | 199 | // 搜索列表的歌曲要额外处理 200 | if(rem.dislist === 0) { 201 | 202 | // 没播放过 203 | if(rem.playlist === undefined) { 204 | rem.playlist = 1; // 设置播放列表为 正在播放 列表 205 | rem.playid = musicList[1].item.length - 1; // 临时设置正在播放的曲目为 正在播放 列表的最后一首 206 | } 207 | 208 | // 获取选定歌曲的信息 209 | var tmpMusic = musicList[0].item[no]; 210 | 211 | 212 | // 查找当前的播放列表中是否已经存在这首歌 213 | for(var i=0; i= musicList[1].item.length) id = 0; 261 | if(id < 0) id = musicList[1].item.length - 1; 262 | 263 | // 记录正在播放的歌曲在正在播放列表中的 id 264 | rem.playid = id; 265 | 266 | // 如果链接为空，则 ajax 获取数据后再播放 267 | if(musicList[1].item[id].url === null || musicList[1].item[id].url === "") { 268 | ajaxUrl(musicList[1].item[id], play); 269 | } else { 270 | play(musicList[1].item[id]); 271 | } 272 | } 273 | 274 | // 初始化 Audio 275 | function initAudio() { 276 | rem.audio = $('').appendTo('body'); 277 | 278 | // 应用初始音量 279 | rem.audio[0].volume = volume_bar.percent; 280 | // 绑定歌曲进度变化事件 281 | rem.audio[0].addEventListener('timeupdate', updateProgress); // 更新进度 282 | rem.audio[0].addEventListener('play', audioPlay); // 开始播放了 283 | rem.audio[0].addEventListener('pause', audioPause); // 暂停 284 | $(rem.audio[0]).on('ended', autoNextMusic); // 播放结束 285 | rem.audio[0].addEventListener('error', audioErr); // 播放器错误处理 286 | } 287 | 288 | 289 | // 播放音乐 290 | // 参数：要播放的音乐数组 291 | function play(music) { 292 | // 调试信息输出 293 | if(mkPlayer.debug) { 294 | console.log('开始播放 - ' + music.name); 295 | 296 | console.info('id: "' + music.id + '",\n' + 297 | 'name: "' + music.name + '",\n' + 298 | 'artist: "' + music.artist + '",\n' + 299 | 'album: "' + music.album + '",\n' + 300 | 'source: "' + music.source + '",\n' + 301 | 'url_id: "' + music.url_id + '",\n' + 302 | 'pic_id: "' + music.pic_id + '",\n' + 303 | 'lyric_id: "' + music.lyric_id + '",\n' + 304 | 'pic: "' + music.pic + '",\n' + 305 | 'url: "' + music.url + '"'); 306 | } 307 | 308 | // 遇到错误播放下一首歌 309 | if(music.url == "err") { 310 | audioErr(); // 调用错误处理函数 311 | return false; 312 | } 313 | 314 | addHis(music); // 添加到播放历史 315 | 316 | // 如果当前主界面显示的是播放历史，那么还需要刷新列表显示 317 | if(rem.dislist == 2 && rem.playlist !== 2) { 318 | loadList(2); 319 | } else { 320 | refreshList(); // 更新列表显示 321 | } 322 | 323 | try { 324 | rem.audio[0].pause(); 325 | rem.audio.attr('src', music.url); 326 | rem.audio[0].play(); 327 | } catch(e) { 328 | audioErr(); // 调用错误处理函数 329 | return; 330 | } 331 | 332 | rem.errCount = 0; // 连续播放失败的歌曲数归零 333 | music_bar.goto(0); // 进度条强制归零 334 | changeCover(music); // 更新封面展示 335 | ajaxLyric(music, lyricCallback); // ajax加载歌词 336 | music_bar.lock(false); // 取消进度条锁定 337 | } 338 | 339 | 340 | // 我的要求并不高，保留这一句版权信息可好？ 341 | // 保留了，你不会损失什么；而保留版权，是对作者最大的尊重。 342 | console.info('欢迎使用 MKOnlinePlayer!\n当前版本：'+mkPlayer.version+' \n作者：mengkun(https://mkblog.cn)\n歌曲来源于各大音乐平台\nGithub：https://github.com/mengkunsoft/MKOnlineMusicPlayer'); 343 | 344 | // 音乐进度条拖动回调函数 345 | function mBcallback(newVal) { 346 | var newTime = rem.audio[0].duration * newVal; 347 | // 应用新的进度 348 | rem.audio[0].currentTime = newTime; 349 | refreshLyric(newTime); // 强制滚动歌词到当前进度 350 | } 351 | 352 | // 音量条变动回调函数 353 | // 参数：新的值 354 | function vBcallback(newVal) { 355 | if(rem.audio[0] !== undefined) { // 音频对象已加载则立即改变音量 356 | rem.audio[0].volume = newVal; 357 | } 358 | 359 | if($(".btn-quiet").is('.btn-state-quiet')) { 360 | $(".btn-quiet").removeClass("btn-state-quiet"); // 取消静音 361 | } 362 | 363 | if(newVal === 0) $(".btn-quiet").addClass("btn-state-quiet"); 364 | 365 | playerSavedata('volume', newVal); // 存储音量信息 366 | } 367 | 368 | // 下面是进度条处理 369 | var initProgress = function(){ 370 | // 初始化播放进度条 371 | music_bar = new mkpgb("#music-progress", 0, mBcallback); 372 | music_bar.lock(true); // 未播放时锁定不让拖动 373 | // 初始化音量设定 374 | var tmp_vol = playerReaddata('volume'); 375 | tmp_vol = (tmp_vol != null)? tmp_vol: (rem.isMobile? 1: mkPlayer.volume); 376 | if(tmp_vol < 0) tmp_vol = 0; // 范围限定 377 | if(tmp_vol > 1) tmp_vol = 1; 378 | if(tmp_vol == 0) $(".btn-quiet").addClass("btn-state-quiet"); // 添加静音样式 379 | volume_bar = new mkpgb("#volume-progress", tmp_vol, vBcallback); 380 | }; 381 | 382 | // mk进度条插件 383 | // 进度条框 id，初始量，回调函数 384 | mkpgb = function(bar, percent, callback){ 385 | this.bar = bar; 386 | this.percent = percent; 387 | this.callback = callback; 388 | this.locked = false; 389 | this.init(); 390 | }; 391 | 392 | mkpgb.prototype = { 393 | // 进度条初始化 394 | init : function(){ 395 | var mk = this,mdown = false; 396 | // 加载进度条html元素 397 | $(mk.bar).html('
      '); 398 | // 获取偏移量 399 | mk.minLength = $(mk.bar).offset().left; 400 | mk.maxLength = $(mk.bar).width() + mk.minLength; 401 | // 窗口大小改变偏移量重置 402 | $(window).resize(function(){ 403 | mk.minLength = $(mk.bar).offset().left; 404 | mk.maxLength = $(mk.bar).width() + mk.minLength; 405 | }); 406 | // 监听小点的鼠标按下事件 407 | $(mk.bar + " .mkpgb-dot").mousedown(function(e){ 408 | e.preventDefault(); // 取消原有事件的默认动作 409 | }); 410 | // 监听进度条整体的鼠标按下事件 411 | $(mk.bar).mousedown(function(e){ 412 | if(!mk.locked) mdown = true; 413 | barMove(e); 414 | }); 415 | // 监听鼠标移动事件，用于拖动 416 | $("html").mousemove(function(e){ 417 | barMove(e); 418 | }); 419 | // 监听鼠标弹起事件，用于释放拖动 420 | $("html").mouseup(function(e){ 421 | mdown = false; 422 | }); 423 | 424 | function barMove(e) { 425 | if(!mdown) return; 426 | var percent = 0; 427 | if(e.clientX < mk.minLength){ 428 | percent = 0; 429 | }else if(e.clientX > mk.maxLength){ 430 | percent = 1; 431 | }else{ 432 | percent = (e.clientX - mk.minLength) / (mk.maxLength - mk.minLength); 433 | } 434 | mk.callback(percent); 435 | mk.goto(percent); 436 | return true; 437 | } 438 | 439 | mk.goto(mk.percent); 440 | 441 | return true; 442 | }, 443 | // 跳转至某处 444 | goto : function(percent) { 445 | if(percent > 1) percent = 1; 446 | if(percent < 0) percent = 0; 447 | this.percent = percent; 448 | $(this.bar + " .mkpgb-dot").css("left", (percent*100) +"%"); 449 | $(this.bar + " .mkpgb-cur").css("width", (percent*100)+"%"); 450 | return true; 451 | }, 452 | // 锁定进度条 453 | lock : function(islock) { 454 | if(islock) { 455 | this.locked = true; 456 | $(this.bar).addClass("mkpgb-locked"); 457 | } else { 458 | this.locked = false; 459 | $(this.bar).removeClass("mkpgb-locked"); 460 | } 461 | return true; 462 | } 463 | }; 464 | 465 | // 快捷键切歌，代码来自 @茗血(https://www.52benxi.cn/) 466 | document.onkeydown = function showkey(e) { 467 | var key = e.keyCode || e.which || e.charCode; 468 | var ctrl = e.ctrlKey || e.metaKey; 469 | var isFocus = $('input').is(":focus"); 470 | if (ctrl && key == 37) playList(rem.playid - 1); // Ctrl+左方向键 切换上一首歌 471 | if (ctrl && key == 39) playList(rem.playid + 1); // Ctrl+右方向键 切换下一首歌 472 | if (key == 32 && isFocus == false) pause(); // 空格键 播放/暂停歌曲 473 | } -------------------------------------------------------------------------------- /js/ajax.js: -------------------------------------------------------------------------------- 1 | /************************************************** 2 | * MKOnlinePlayer v2.4 3 | * Ajax 后台数据交互请求模块 4 | * 编写：mengkun(https://mkblog.cn) 5 | * 时间：2018-3-11 6 | *************************************************/ 7 | 8 | // ajax加载搜索结果 9 | function ajaxSearch() { 10 | if(rem.wd === ""){ 11 | layer.msg('搜索内容不能为空', {anim:6}); 12 | return false; 13 | } 14 | 15 | if(rem.loadPage == 1) { // 弹出搜索提示 16 | var tmpLoading = layer.msg('搜索中', {icon: 16,shade: 0.01}); 17 | } 18 | 19 | $.ajax({ 20 | type: mkPlayer.method, 21 | url: mkPlayer.api, 22 | data: "types=search&count=" + mkPlayer.loadcount + "&source=" + rem.source + "&pages=" + rem.loadPage + "&name=" + rem.wd, 23 | dataType : "jsonp", 24 | complete: function(XMLHttpRequest, textStatus) { 25 | if(tmpLoading) layer.close(tmpLoading); // 关闭加载中动画 26 | }, // complete 27 | success: function(jsonData){ 28 | 29 | // 调试信息输出 30 | if(mkPlayer.debug) { 31 | console.debug("搜索结果数：" + jsonData.length); 32 | } 33 | 34 | if(rem.loadPage == 1) // 加载第一页，清空列表 35 | { 36 | if(jsonData.length === 0) // 返回结果为零 37 | { 38 | layer.msg('没有找到相关歌曲', {anim:6}); 39 | return false; 40 | } 41 | musicList[0].item = []; 42 | rem.mainList.html(''); // 清空列表中原有的元素 43 | addListhead(); // 加载列表头 44 | } else { 45 | $("#list-foot").remove(); //已经是加载后面的页码了，删除之前的“加载更多”提示 46 | } 47 | 48 | if(jsonData.length === 0) 49 | { 50 | addListbar("nomore"); // 加载完了 51 | return false; 52 | } 53 | 54 | var tempItem = [], no = musicList[0].item.length; 55 | 56 | for (var i = 0; i < jsonData.length; i++) { 57 | no ++; 58 | tempItem = { 59 | id: jsonData[i].id, // 音乐ID 60 | name: jsonData[i].name, // 音乐名字 61 | artist: jsonData[i].artist[0], // 艺术家名字 62 | album: jsonData[i].album, // 专辑名字 63 | source: jsonData[i].source, // 音乐来源 64 | url_id: jsonData[i].url_id, // 链接ID 65 | pic_id: jsonData[i].pic_id, // 封面ID 66 | lyric_id: jsonData[i].lyric_id, // 歌词ID 67 | pic: null, // 专辑图片 68 | url: null // mp3链接 69 | }; 70 | musicList[0].item.push(tempItem); // 保存到搜索结果临时列表中 71 | addItem(no, tempItem.name, tempItem.artist, tempItem.album); // 在前端显示 72 | } 73 | 74 | rem.dislist = 0; // 当前显示的是搜索列表 75 | rem.loadPage ++; // 已加载的列数+1 76 | 77 | dataBox("list"); // 在主界面显示出播放列表 78 | refreshList(); // 刷新列表，添加正在播放样式 79 | 80 | if(no < mkPlayer.loadcount) { 81 | addListbar("nomore"); // 没加载满，说明已经加载完了 82 | } else { 83 | addListbar("more"); // 还可以点击加载更多 84 | } 85 | 86 | if(rem.loadPage == 2) listToTop(); // 播放列表滚动到顶部 87 | }, //success 88 | error: function(XMLHttpRequest, textStatus, errorThrown) { 89 | layer.msg('搜索结果获取失败 - ' + XMLHttpRequest.status); 90 | console.error(XMLHttpRequest + textStatus + errorThrown); 91 | } // error 92 | });//ajax 93 | } 94 | 95 | // 完善获取音乐信息 96 | // 音乐所在列表ID、音乐对应ID、回调函数 97 | function ajaxUrl(music, callback) 98 | { 99 | // 已经有数据，直接回调 100 | if(music.url !== null && music.url !== "err" && music.url !== "") { 101 | callback(music); 102 | return true; 103 | } 104 | // id为空，赋值链接错误。直接回调 105 | if(music.id === null) { 106 | music.url = "err"; 107 | updateMinfo(music); // 更新音乐信息 108 | callback(music); 109 | return true; 110 | } 111 | 112 | $.ajax({ 113 | type: mkPlayer.method, 114 | url: mkPlayer.api, 115 | data: "types=url&id=" + music.id + "&source=" + music.source, 116 | dataType : "jsonp", 117 | success: function(jsonData){ 118 | // 调试信息输出 119 | if(mkPlayer.debug) { 120 | console.debug("歌曲链接：" + jsonData.url); 121 | } 122 | 123 | // 解决网易云音乐部分歌曲无法播放问题 124 | if(music.source == "netease") { 125 | if(jsonData.url === "") { 126 | jsonData.url = "https://music.163.com/song/media/outer/url?id=" + music.id + ".mp3"; 127 | } else { 128 | jsonData.url = jsonData.url.replace(/m7c.music./g, "m7.music."); 129 | jsonData.url = jsonData.url.replace(/m8c.music./g, "m8.music."); 130 | } 131 | } else if(music.source == "baidu") { // 解决百度音乐防盗链 132 | jsonData.url = jsonData.url.replace(/http:\/\/zhangmenshiting.qianqian.com/g, "https://gss0.bdstatic.com/y0s1hSulBw92lNKgpU_Z2jR7b2w6buu"); 133 | } 134 | 135 | if(jsonData.url === "") { 136 | music.url = "err"; 137 | } else { 138 | music.url = jsonData.url; // 记录结果 139 | } 140 | 141 | updateMinfo(music); // 更新音乐信息 142 | 143 | callback(music); // 回调函数 144 | return true; 145 | }, //success 146 | error: function(XMLHttpRequest, textStatus, errorThrown) { 147 | layer.msg('歌曲链接获取失败 - ' + XMLHttpRequest.status); 148 | console.error(XMLHttpRequest + textStatus + errorThrown); 149 | } // error 150 | }); //ajax 151 | 152 | } 153 | 154 | // 完善获取音乐封面图 155 | // 包含音乐信息的数组、回调函数 156 | function ajaxPic(music, callback) 157 | { 158 | // 已经有数据，直接回调 159 | if(music.pic !== null && music.pic !== "err" && music.pic !== "") { 160 | callback(music); 161 | return true; 162 | } 163 | // pic_id 为空，赋值链接错误。直接回调 164 | if(music.pic_id === null) { 165 | music.pic = "err"; 166 | updateMinfo(music); // 更新音乐信息 167 | callback(music); 168 | return true; 169 | } 170 | 171 | $.ajax({ 172 | type: mkPlayer.method, 173 | url: mkPlayer.api, 174 | data: "types=pic&id=" + music.pic_id + "&source=" + music.source, 175 | dataType : "jsonp", 176 | success: function(jsonData){ 177 | // 调试信息输出 178 | if(mkPlayer.debug) { 179 | console.log("歌曲封面：" + jsonData.url); 180 | } 181 | 182 | if(jsonData.url !== "") { 183 | music.pic = jsonData.url; // 记录结果 184 | } else { 185 | music.pic = "err"; 186 | } 187 | 188 | updateMinfo(music); // 更新音乐信息 189 | 190 | callback(music); // 回调函数 191 | return true; 192 | }, //success 193 | error: function(XMLHttpRequest, textStatus, errorThrown) { 194 | layer.msg('歌曲封面获取失败 - ' + XMLHttpRequest.status); 195 | console.error(XMLHttpRequest + textStatus + errorThrown); 196 | } // error 197 | }); //ajax 198 | 199 | } 200 | 201 | // ajax加载用户歌单 202 | // 参数：歌单网易云 id, 歌单存储 id，回调函数 203 | function ajaxPlayList(lid, id, callback) { 204 | if(!lid) return false; 205 | 206 | // 已经在加载了，跳过 207 | if(musicList[id].isloading === true) { 208 | return true; 209 | } 210 | 211 | musicList[id].isloading = true; // 更新状态：列表加载中 212 | 213 | $.ajax({ 214 | type: mkPlayer.method, 215 | url: mkPlayer.api, 216 | data: "types=playlist&id=" + lid, 217 | dataType : "jsonp", 218 | complete: function(XMLHttpRequest, textStatus) { 219 | musicList[id].isloading = false; // 列表已经加载完了 220 | }, // complete 221 | success: function(jsonData){ 222 | // 存储歌单信息 223 | var tempList = { 224 | id: lid, // 列表的网易云 id 225 | name: jsonData.playlist.name, // 列表名字 226 | cover: jsonData.playlist.coverImgUrl, // 列表封面 227 | creatorName: jsonData.playlist.creator.nickname, // 列表创建者名字 228 | creatorAvatar: jsonData.playlist.creator.avatarUrl, // 列表创建者头像 229 | item: [] 230 | }; 231 | 232 | if(jsonData.playlist.coverImgUrl !== '') { 233 | tempList.cover = jsonData.playlist.coverImgUrl + "?param=200y200"; 234 | } else { 235 | tempList.cover = musicList[id].cover; 236 | } 237 | 238 | if(typeof jsonData.playlist.tracks !== undefined || jsonData.playlist.tracks.length !== 0) { 239 | // 存储歌单中的音乐信息 240 | for (var i = 0; i < jsonData.playlist.tracks.length; i++) { 241 | tempList.item[i] = { 242 | id: jsonData.playlist.tracks[i].id, // 音乐ID 243 | name: jsonData.playlist.tracks[i].name, // 音乐名字 244 | artist: jsonData.playlist.tracks[i].ar[0].name, // 艺术家名字 245 | album: jsonData.playlist.tracks[i].al.name, // 专辑名字 246 | source: "netease", // 音乐来源 247 | url_id: jsonData.playlist.tracks[i].id, // 链接ID 248 | pic_id: null, // 封面ID 249 | lyric_id: jsonData.playlist.tracks[i].id, // 歌词ID 250 | pic: jsonData.playlist.tracks[i].al.picUrl + "?param=300y300", // 专辑图片 251 | url: null // mp3链接 252 | }; 253 | } 254 | } 255 | 256 | // 歌单用户 id 不能丢 257 | if(musicList[id].creatorID) { 258 | tempList.creatorID = musicList[id].creatorID; 259 | if(musicList[id].creatorID === rem.uid) { // 是当前登录用户的歌单，要保存到缓存中 260 | var tmpUlist = playerReaddata('ulist'); // 读取本地记录的用户歌单 261 | if(tmpUlist) { // 读取到了 262 | for(i=0; i读取失败'); // 专辑名字 293 | } // error 294 | });//ajax 295 | } 296 | 297 | // ajax加载歌词 298 | // 参数：音乐ID，回调函数 299 | function ajaxLyric(music, callback) { 300 | lyricTip('歌词加载中...'); 301 | 302 | if(!music.lyric_id) callback(''); // 没有歌词ID，直接返回 303 | 304 | $.ajax({ 305 | type: mkPlayer.method, 306 | url: mkPlayer.api, 307 | data: "types=lyric&id=" + music.lyric_id + "&source=" + music.source, 308 | dataType : "jsonp", 309 | success: function(jsonData){ 310 | // 调试信息输出 311 | if (mkPlayer.debug) { 312 | console.debug("歌词获取成功"); 313 | } 314 | 315 | if (jsonData.lyric) { 316 | callback(jsonData.lyric, music.lyric_id); // 回调函数 317 | } else { 318 | callback('', music.lyric_id); // 回调函数 319 | } 320 | }, //success 321 | error: function(XMLHttpRequest, textStatus, errorThrown) { 322 | layer.msg('歌词读取失败 - ' + XMLHttpRequest.status); 323 | console.error(XMLHttpRequest + textStatus + errorThrown); 324 | callback('', music.lyric_id); // 回调函数 325 | } // error 326 | });//ajax 327 | } 328 | 329 | 330 | // ajax加载用户的播放列表 331 | // 参数 用户的网易云 id 332 | function ajaxUserList(uid) 333 | { 334 | var tmpLoading = layer.msg('加载中...', {icon: 16,shade: 0.01}); 335 | $.ajax({ 336 | type: mkPlayer.method, 337 | url: mkPlayer.api, 338 | data: "types=userlist&uid=" + uid, 339 | dataType : "jsonp", 340 | complete: function(XMLHttpRequest, textStatus) { 341 | if(tmpLoading) layer.close(tmpLoading); // 关闭加载中动画 342 | }, // complete 343 | success: function(jsonData){ 344 | if(jsonData.code == "-1" || jsonData.code == 400){ 345 | layer.msg('用户 uid 输入有误'); 346 | return false; 347 | } 348 | 349 | if(jsonData.playlist.length === 0 || typeof(jsonData.playlist.length) === "undefined") 350 | { 351 | layer.msg('没找到用户 ' + uid + ' 的歌单'); 352 | return false; 353 | }else{ 354 | var tempList,userList = []; 355 | $("#sheet-bar").remove(); // 移除登陆条 356 | rem.uid = uid; // 记录已同步用户 uid 357 | rem.uname = jsonData.playlist[0].creator.nickname; // 第一个列表(喜欢列表)的创建者即用户昵称 358 | layer.msg('欢迎您 '+rem.uname); 359 | // 记录登录用户 360 | playerSavedata('uid', rem.uid); 361 | playerSavedata('uname', rem.uname); 362 | 363 | for (var i = 0; i < jsonData.playlist.length; i++) 364 | { 365 | // 获取歌单信息 366 | tempList = { 367 | id: jsonData.playlist[i].id, // 列表的网易云 id 368 | name: jsonData.playlist[i].name, // 列表名字 369 | cover: jsonData.playlist[i].coverImgUrl + "?param=200y200", // 列表封面 370 | creatorID: uid, // 列表创建者id 371 | creatorName: jsonData.playlist[i].creator.nickname, // 列表创建者名字 372 | creatorAvatar: jsonData.playlist[i].creator.avatarUrl, // 列表创建者头像 373 | item: [] 374 | }; 375 | // 存储并显示播放列表 376 | addSheet(musicList.push(tempList) - 1, tempList.name, tempList.cover); 377 | userList.push(tempList); 378 | } 379 | playerSavedata('ulist', userList); 380 | // 显示退出登录的提示条 381 | sheetBar(); 382 | } 383 | // 调试信息输出 384 | if(mkPlayer.debug) { 385 | console.debug("用户歌单获取成功 [用户网易云ID：" + uid + "]"); 386 | } 387 | }, //success 388 | error: function(XMLHttpRequest, textStatus, errorThrown) { 389 | layer.msg('歌单同步失败 - ' + XMLHttpRequest.status); 390 | console.error(XMLHttpRequest + textStatus + errorThrown); 391 | } // error 392 | });//ajax 393 | return true; 394 | } -------------------------------------------------------------------------------- /css/player.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /************************************************** 3 | * MKOnlinePlayer v2.41 4 | * 播放器样式表文件 5 | * 编写：mengkun(https://mkblog.cn) 6 | * 时间：2018-3-13 7 | *************************************************/ 8 | blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul { 9 | margin: 0; 10 | padding: 0 11 | } 12 | body, button, input, select, textarea, th { 13 | color: #333; 14 | background-color: #fff; 15 | font-size: 14px; 16 | line-height: 1.5; 17 | font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif; 18 | font-family: Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif/9 19 | } 20 | h1, h2, h3, h4, h5, h6 { 21 | font-size: 100% 22 | } 23 | li { 24 | list-style: none 25 | } 26 | img { 27 | border: 0 none; 28 | -ms-interpolation-mode: bicubic; 29 | image-rendering: optimizeQuality 30 | } 31 | input[type=button], input[type=submit] { 32 | cursor: pointer 33 | } 34 | button { 35 | cursor: pointer 36 | } 37 | table { 38 | border-collapse: collapse; 39 | border-spacing: 0 40 | } 41 | a { 42 | color: #333; 43 | text-decoration: none 44 | } 45 | a:hover { 46 | color: #31c27c; 47 | text-decoration: none 48 | } 49 | a:focus, button:focus, input:focus { 50 | outline: 0 51 | } 52 | .text-center {text-align: center;} 53 | .clear-fix {zoom: 1;} 54 | .clear-fix:before, .clear-fix:after {display: table;line-height: 0;content: "";} 55 | .clear-fix:after {clear: both; } 56 | .hidden {display: none !important;} 57 | /*滚动条美化*/ 58 | .mCSB_container::-webkit-scrollbar{width:0;height:0} 59 | #lyric::-webkit-scrollbar{width:0;height:0} 60 | 61 | html,body{ 62 | height: 100%; 63 | width: 100%; 64 | background-color: #777970; 65 | overflow: hidden; 66 | } 67 | body { 68 | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&0.38+0,0.17+61,0.8+100 */ 69 | /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 70 | background: #000000; 71 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000'); 72 | background-image: -webkit-linear-gradient(200deg, #7f7280, #000000); 73 | background-image: -moz-linear-gradient(200deg, #7f7280, #000000); 74 | background-image: -o-linear-gradient(200deg, #7f7280, #000000); 75 | background-image: -ms-linear-gradient(200deg, #7f7280, #000000); 76 | background-image: linear-gradient(200deg, #7f7280, #000000); 77 | 78 | overflow: hidden; 79 | } 80 | /* 模糊图像层 */ 81 | #blur-img { 82 | position: fixed; 83 | height: 100%; 84 | left: -10%; 85 | width: 120%; 86 | overflow: hidden; 87 | } 88 | /* 移动端使用的模糊图像层 */ 89 | #mobile-blur { 90 | -webkit-filter: blur(50px); 91 | filter: blur(50px); 92 | -webkit-transform: scale(1.15); 93 | transform: scale(1.15); 94 | position: absolute; 95 | top: 0; 96 | bottom: 0; 97 | left: 0; 98 | z-index: 1; 99 | width: 100%; 100 | background-size: cover; 101 | background-position: bottom center; 102 | } 103 | /* 图像遮罩层 */ 104 | .blur-mask { 105 | display: none; 106 | position: absolute; 107 | width: 100%; 108 | height: 100%; 109 | background-color: #000; 110 | filter:alpha(opacity=30); 111 | -moz-opacity:0.3; 112 | opacity:0.3; 113 | top: 0; 114 | left: 0; 115 | overflow: hidden; 116 | } 117 | 118 | .mobile-mask { 119 | filter:alpha(opacity=60); 120 | -moz-opacity:0.6; 121 | opacity:0.6; 122 | } 123 | 124 | #mkplayer{ 125 | display: none; 126 | } 127 | .header { 128 | height: 50px; 129 | position: absolute; 130 | } 131 | .logo { 132 | transition: all 0.25s ease; 133 | -webkit-transition: all 0.25s ease; 134 | -moz-transition: all 0.25s ease; 135 | -o-transition: all 0.25s ease; 136 | -ms-transition: all 0.25s ease; 137 | display: inline-block; 138 | font-size: 23px; 139 | color: #829194; 140 | cursor: pointer; 141 | margin: 10px 20px; 142 | } 143 | .logo:hover { 144 | color: #fff; 145 | } 146 | 147 | /* 宽度约束容器 */ 148 | .container{ 149 | position: relative; 150 | width: 100%; 151 | height: 100%; 152 | max-width: 1200px; 153 | margin: 0 auto; 154 | } 155 | 156 | /* 中部主要容器 */ 157 | .center{ 158 | position: absolute; 159 | width: 100%; 160 | top: 50px; 161 | bottom: 100px; 162 | } 163 | 164 | /* 顶部按钮条 */ 165 | .btn-bar { 166 | position: absolute; 167 | display: inline-block; 168 | left: 0; 169 | right: 400px; 170 | height: 55px; 171 | } 172 | 173 | 174 | /* 顶部按钮区域 */ 175 | .btn-box { 176 | position: absolute; 177 | top: 10px; 178 | bottom: 10px; 179 | left: 10px; 180 | right: 10px; 181 | } 182 | /* 常规按钮 */ 183 | .btn { 184 | transition: all 0.25s ease; 185 | -webkit-transition: all 0.25s ease; 186 | -moz-transition: all 0.25s ease; 187 | -o-transition: all 0.25s ease; 188 | -ms-transition: all 0.25s ease; 189 | -webkit-user-select: none; 190 | -moz-user-select: none; 191 | -ms-user-select: none; 192 | user-select: none; 193 | display: inline-block; 194 | position: relative; 195 | border-radius: 2px; 196 | border: 1px solid #fff; 197 | border: 1px solid rgba(150,150,150,.5); 198 | color: #fff; 199 | opacity: .8; 200 | filter: alpha(opacity=80); 201 | cursor: pointer; 202 | font-size: 14px; 203 | padding: 6px 25px; 204 | margin: 0 2px; 205 | } 206 | .btn:hover { 207 | border: 1px solid #fff; 208 | opacity: 1; 209 | filter: alpha(opacity=100); 210 | } 211 | .btn[data-action='player'] { 212 | display: none; 213 | } 214 | 215 | /* 搜索工具样式 */ 216 | #search-area { 217 | padding: 25px 15px; 218 | } 219 | .search-group { 220 | font-size: 0; 221 | padding-bottom: 10px; 222 | } 223 | .search-group>input, .search-group>button { 224 | -webkit-box-sizing: border-box; 225 | -moz-box-sizing: border-box; 226 | box-sizing: border-box; 227 | } 228 | .search-group>input { 229 | padding: 5px; 230 | border: 1px solid #a7a1a1; 231 | height: 35px; 232 | width: 80%; 233 | } 234 | .search-group>button { 235 | border: 1px solid #a7a1a1; 236 | background-color: #eee; 237 | height: 35px; 238 | margin-left: -1px; 239 | width: 20%; 240 | white-space: nowrap; 241 | text-overflow: clip; 242 | overflow: hidden; 243 | } 244 | .radio-group>label { 245 | margin-right: 10px; 246 | cursor: pointer; 247 | } 248 | .radio-group>label>input { 249 | vertical-align: -2px; 250 | } 251 | 252 | /* 左侧主体数据区 */ 253 | .data-area { 254 | position: absolute; 255 | left: 0; 256 | right: 400px; 257 | top: 60px; 258 | bottom: 0; 259 | overflow: hidden; 260 | } 261 | 262 | /* 数据区域容器 */ 263 | .data-box { 264 | position: absolute; 265 | left: 10px; 266 | right: 10px; 267 | top: 10px; 268 | bottom: 10px; 269 | overflow-y: auto; 270 | } 271 | 272 | /*以下是播放列表 css 样式*/ 273 | /* 列表头 */ 274 | .list-head { 275 | height: 40px; 276 | } 277 | 278 | /* 一项数据 */ 279 | .list-item { 280 | width: 100%; 281 | height: 50px; 282 | line-height: 50px; 283 | color: #bdbdbe; 284 | color: rgba(225,225,225,.8); 285 | font-size: 14px; 286 | overflow: hidden; 287 | border-bottom: 1px solid rgba(150,150,150,.1); 288 | cursor: default; 289 | position: relative; 290 | } 291 | 292 | /* 正在播放的那项 */ 293 | .list-playing { 294 | color: #fff; 295 | } 296 | 297 | /* 列表数字 */ 298 | .list-num { 299 | display: block; 300 | width: 30px; 301 | text-align: center; 302 | float: left; 303 | overflow: hidden; 304 | } 305 | /* 正在播放的那项数字 */ 306 | .list-playing .list-num { 307 | background: url("../images/wave.gif") 10px 20px no-repeat; 308 | text-indent: -99px; 309 | } 310 | 311 | /* 音乐名字 */ 312 | .music-name { 313 | position: relative; 314 | display: block; 315 | width: auto; 316 | margin-left: 40px; 317 | margin-right: 300px; 318 | height: 100%; 319 | -webkit-user-select: none; 320 | -moz-user-select: none; /*禁止双击选定*/ 321 | -ms-user-select: none; 322 | -o-user-select: none; 323 | user-select: none; 324 | } 325 | /* 鼠标滑过时音乐名字被截断 */ 326 | .music-name-cult { 327 | display: block; 328 | word-break: keep-all; 329 | white-space: nowrap; 330 | overflow: hidden; 331 | text-overflow: ellipsis; 332 | } 333 | .list-item:hover .music-name-cult { 334 | padding-right: 150px; 335 | } 336 | .list-playing:hover .music-name-cult { 337 | padding-right: 100px; 338 | } 339 | /* 作者名称与音乐专辑 */ 340 | .auth-name,.music-album { 341 | position: relative; 342 | display: block; 343 | width: 150px; 344 | float: right; 345 | height: 100%; 346 | word-break: keep-all; 347 | white-space: nowrap; 348 | overflow: hidden; 349 | text-overflow: ellipsis; 350 | } 351 | /* 移动端的菜单图标 */ 352 | .list-mobile-menu { 353 | display: none; 354 | } 355 | 356 | /*列表中滑动出现的菜单*/ 357 | .list-menu { 358 | position: absolute; 359 | right: 10px; 360 | top: 50%; 361 | overflow: hidden; 362 | font-size: 0; 363 | height: 36px; 364 | margin-top: -18px; 365 | float: right; 366 | display: none; 367 | } 368 | .list-item:hover .list-menu { 369 | display: block; 370 | } 371 | .list-head:hover .list-menu { 372 | display: none; 373 | } 374 | 375 | /* 列表中滑动出现的小图标 */ 376 | .list-icon { 377 | display: block; 378 | width: 36px; 379 | height: 36px; 380 | background-image: url("../images/icon_list_menu.png"); 381 | float: left; 382 | margin-left: 10px; 383 | cursor: pointer; 384 | } 385 | .list-playing .icon-play{ 386 | display: none; 387 | } 388 | .icon-play { 389 | background-position: -80px 0; 390 | } 391 | .icon-play:hover { 392 | background-position: -120px 0; 393 | } 394 | .icon-download { 395 | background-position: -80px -120px; 396 | } 397 | .icon-download:hover { 398 | background-position: -120px -120px; 399 | } 400 | .icon-share { 401 | background-position: -80px -40px; 402 | } 403 | .icon-share:hover { 404 | background-position: -120px -40px; 405 | } 406 | 407 | /* 分享弹窗中的链接框 */ 408 | .share-url { 409 | width: 100%; 410 | margin-top: 10px; 411 | margin-bottom: 10px; 412 | line-height: 30px; 413 | box-sizing: border-box; 414 | padding: 0 5px; 415 | border: 1px solid #ccc; 416 | box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; 417 | color: #333; 418 | height: 35px; 419 | } 420 | .share-tips { 421 | font-size: 12px; 422 | color: #a9a9a9; 423 | } 424 | 425 | /* 列表中可以被点击的横条 */ 426 | .list-clickable { 427 | cursor: pointer; 428 | } 429 | 430 | /* 以下是歌单 css 样式 */ 431 | /* 歌单中的一项 */ 432 | .sheet-item { 433 | position: relative; 434 | display: block; 435 | width: 25%; 436 | float: left; 437 | text-align: center; 438 | } 439 | /* 歌单封面 */ 440 | .sheet-cover { 441 | display: block; 442 | width: 100px; 443 | height: 100px; 444 | margin: 10px auto; 445 | cursor: pointer; 446 | } 447 | /* 正在播放的列表 */ 448 | .sheet-playing:before { 449 | content: url(../images/wave.gif); 450 | position: absolute; 451 | top: 90px; 452 | left: 50%; 453 | margin-left: -45px; 454 | } 455 | 456 | /* 歌单名字 */ 457 | .sheet-name { 458 | /*padding: 0 5px;*/ 459 | display: inline-block; 460 | max-width: 120px; 461 | white-space: nowrap; 462 | text-overflow: ellipsis; 463 | -o-text-overflow: ellipsis; 464 | overflow: hidden; 465 | margin-bottom: 10px; 466 | color: #fff; 467 | cursor: pointer; 468 | font-size: 12px; 469 | } 470 | /* 播放列表分割标题栏 */ 471 | .sheet-title-bar { 472 | border-radius: 2px; 473 | margin: 20px 0; 474 | text-align: center; 475 | line-height: 40px; 476 | height: 40px; 477 | color: #C5C5C5; 478 | background-color: rgba(0, 0, 0, 0.12); 479 | } 480 | .login-btn { 481 | cursor: pointer; 482 | } 483 | .login-btn:hover { 484 | color: #31c27c; 485 | } 486 | 487 | /* 以下是界面右侧 css 样式 */ 488 | /* 播放器主体(歌词和封面) */ 489 | .player { 490 | height: 100%; 491 | width: 400px; 492 | float: right; 493 | position: relative; 494 | } 495 | 496 | /* 歌曲封面区域 */ 497 | .cover { 498 | position: relative; 499 | display: block; 500 | width: 186px; 501 | height: 186px; 502 | margin: auto; 503 | } 504 | 505 | .cover:after { 506 | content: ""; 507 | position: absolute; 508 | left: 9px; 509 | top: 0; 510 | width: 201px; 511 | height: 180px; 512 | background: url(../images/album_cover_player.png) 0 0 no-repeat; 513 | pointer-events: none; 514 | } 515 | /* 歌曲封面图片 */ 516 | .music-cover { 517 | vertical-align: middle; 518 | width: 186px; 519 | height: 186px; 520 | } 521 | 522 | /* 歌词显示区域 */ 523 | .lyric { 524 | position: absolute; 525 | left: 10px; 526 | right: 10px; 527 | top: 195px; 528 | bottom: 10px; 529 | overflow: hidden; 530 | text-align: center; 531 | color: #bdbdbe; 532 | color: rgba(225,225,225,.8); 533 | line-height: 28px; 534 | padding: 20px 0; 535 | } 536 | /* 歌词ul */ 537 | #lyric { 538 | position: absolute; 539 | width: 100%; 540 | top: 0; 541 | bottom: 0; 542 | overflow: hidden; 543 | } 544 | #lyric>li { 545 | word-break: keep-all; 546 | white-space: nowrap; 547 | overflow: hidden; 548 | text-overflow: ellipsis; 549 | } 550 | /* 正在播放的那一句歌词 */ 551 | #lyric .lplaying { 552 | color: #31c27c; 553 | } 554 | /* 歌词显示区显示的提示语(如加载中、无歌词等) */ 555 | .lyric-tip { 556 | position: absolute; 557 | width: 100%; 558 | top: 50%; 559 | } 560 | 561 | /* 歌曲信息按钮 */ 562 | #music-info { 563 | transition: all 0.25s ease; 564 | -webkit-transition: all 0.25s ease; 565 | -moz-transition: all 0.25s ease; 566 | -o-transition: all 0.25s ease; 567 | -ms-transition: all 0.25s ease; 568 | position: absolute; 569 | width: 27px; 570 | height: 26px; 571 | border-radius: 13px; 572 | right: 10px; 573 | bottom: 10px; 574 | cursor: pointer; 575 | color: #fff; 576 | text-align: center; 577 | line-height: 26px; 578 | font-weight: bold; 579 | background-image: url(../images/player.png); 580 | background-position: -28px -367px; 581 | background-color: #353535; 582 | opacity: 0.3; 583 | filter: Alpha(opacity=30); 584 | } 585 | #music-info:hover { 586 | opacity: 1; 587 | filter: Alpha(opacity=100); 588 | } 589 | /* 标题 */ 590 | .info-title { 591 | color: #B2AFAF 592 | } 593 | .info-btn { 594 | cursor: pointer; 595 | color: #31c27c; 596 | } 597 | .info-btn:hover { 598 | text-decoration: underline; 599 | } 600 | /* 底部 */ 601 | .footer { 602 | height: 100px; 603 | bottom: 0; 604 | width: 100%; 605 | position: absolute; 606 | } 607 | 608 | /* 带图片的按钮 */ 609 | .player-btn { 610 | background-image: url("../images/player.png"); 611 | opacity: .8; 612 | filter: alpha(opacity=80) 613 | } 614 | .player-btn:hover { 615 | opacity: 1; 616 | filter: alpha(opacity=100) 617 | } 618 | /* 暂停状态 */ 619 | .btn-state-paused { 620 | background-position: -30px 0; 621 | } 622 | /* 控制按钮(上一首、播放、下一首)区域 */ 623 | .con-btn { 624 | float: left; 625 | width: 130px; 626 | height: 100%; 627 | position: relative; 628 | margin: 0 10px; 629 | } 630 | .con-btn a{ 631 | display: inline-block; 632 | position: absolute; 633 | top: 50%; 634 | } 635 | .btn-prev{ 636 | background-position: 0 -30px; 637 | width: 19px; 638 | height: 20px; 639 | margin-top: -10px; 640 | } 641 | 642 | .btn-play{ 643 | width: 19px; 644 | height: 29px; 645 | margin-top: -14.5px; 646 | left: 36%; 647 | margin-left: -10.5px; 648 | } 649 | .btn-next{ 650 | background-position: 0 -52px; 651 | right: 30%; 652 | width: 19px; 653 | height: 20px; 654 | margin-top: -10px; 655 | } 656 | .btn-order{ 657 | background-position: 0 -173px; 658 | background-size: 450%; 659 | right: 0; 660 | width: 25px; 661 | height: 25px; 662 | margin-top: -10px; 663 | } 664 | .btn-order-single { 665 | background-position: 0 -196px; 666 | } 667 | .btn-order-list { 668 | background-position: 0 -173px; 669 | } 670 | .btn-order-random { 671 | background-position: 0 -62px; 672 | height: 18px; 673 | margin-top: -9px; 674 | } 675 | 676 | /* 音乐进度条区域 */ 677 | .progress { 678 | width: auto; 679 | margin-left: 150px; 680 | margin-right: 200px; 681 | height: 100%; 682 | position: relative; 683 | } 684 | 685 | /* 限制进度条的盒子 */ 686 | .progress-box { 687 | position: absolute; 688 | height: 20px; 689 | left: 10px; 690 | right: 0; 691 | top: 50%; 692 | margin-top: -9px; 693 | } 694 | 695 | /* 音量控制区域 */ 696 | .vol { 697 | float: right; 698 | width: 200px; 699 | height: 100%; 700 | right: 0; 701 | position: relative; 702 | } 703 | 704 | .quiet { 705 | width: 60px; 706 | height: 100%; 707 | position: relative; 708 | float: left; 709 | } 710 | .btn-quiet{ 711 | display: inline-block; 712 | position: absolute; 713 | width: 26px; 714 | height: 21px; 715 | top: 50%; 716 | right: 0; 717 | margin-top: -10px; 718 | background-position: 0 -144px; 719 | } 720 | .btn-state-quiet { 721 | background-position: 0 -182px; 722 | } 723 | .volume { 724 | position: relative; 725 | margin-left: 60px; 726 | height: 100%; 727 | overflow: hidden; 728 | } 729 | /* 限制声音进度条的盒子 */ 730 | .volume-box { 731 | position: absolute; 732 | height: 20px; 733 | left: 10px; 734 | right: 10px; 735 | top: 50%; 736 | margin-top: -10px; 737 | } 738 | 739 | /* 以下是孟坤进度条控件样式区域 */ 740 | /* 进度条可点击区域 */ 741 | .mkpgb-area { 742 | position: relative; 743 | cursor: pointer; 744 | height: 100%; 745 | } 746 | /* 进度条有背景区域 */ 747 | .mkpgb-bar { 748 | position: absolute; 749 | top: 50%; 750 | left: 0; 751 | right: 0; 752 | height: 2px; 753 | margin-top: -1px; 754 | border-radius: 2px; 755 | background-color: #808284; 756 | overflow: hidden; 757 | } 758 | /* 进度条已完成区域 */ 759 | .mkpgb-cur { 760 | position: absolute; 761 | background-color: #D8D8D8; 762 | width: 0; 763 | height: 2px; 764 | top: 50%; 765 | margin-top: -1px; 766 | border-radius: 2px; 767 | transition: all 0.25s ease; 768 | -webkit-transition: all 0.25s ease; 769 | -moz-transition: all 0.25s ease; 770 | -o-transition: all 0.25s ease; 771 | -ms-transition: all 0.25s ease; 772 | } 773 | /* 进度条小点 */ 774 | .mkpgb-dot { 775 | width: 10px; 776 | height: 10px; 777 | background-color: #fff; 778 | border-radius: 5px; 779 | overflow: hidden; 780 | position: absolute; 781 | left: 0px; 782 | margin-left: -5px; 783 | top: 50%; 784 | margin-top: -5px; 785 | transition: all 0.25s ease; 786 | -webkit-transition: all 0.25s ease; 787 | -moz-transition: all 0.25s ease; 788 | -o-transition: all 0.25s ease; 789 | -ms-transition: all 0.25s ease; 790 | } 791 | /* 进度条禁止点击样式 */ 792 | .mkpgb-locked { 793 | cursor: default; 794 | } 795 | 796 | /* 闪动效果作者：qiuye */ 797 | .dot-move { 798 | -webkit-box-shadow: 0 0 20px #fff; 799 | -moz-animation: dot-move 3s linear 2s infinite; 800 | -webkit-animation: dot-move 3s linear 2s infinite; 801 | -o-animation: dot-move 3s linear 2s infinite; 802 | -ms-animation: dot-move 3s linear 2s infinite; 803 | } 804 | @-webkit-keyframes dot-move{0%{-webkit-box-shadow: 0 0 20px #fff;}25%{-webkit-box-shadow: 0 0 10px #fff;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 10px #fff;}100%{-webkit-box-shadow: 0 0 20px #fff;}} 805 | @keyframes dot-move{0%{-webkit-box-shadow: 0 0 10px #363333;}25%{-webkit-box-shadow: 0 0 7px #363333;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 6px #fff;}100%{-webkit-box-shadow: 0 0 10px #363333;}} 806 | -------------------------------------------------------------------------------- /plugns/layer/layer.js: -------------------------------------------------------------------------------- 1 | /*! layer-v3.0.2 Web弹层组件 MIT License http://layer.layui.com/ By 贤心 */ 2 | ;!function(e,t){"use strict";var i,n,a=e.layui&&layui.define,o={getPath:function(){var e=document.scripts,t=e[e.length-1],i=t.src;if(!t.getAttribute("merge"))return i.substring(0,i.lastIndexOf("/")+1)}(),config:{},end:{},minIndex:0,minLeft:[],btn:["确定","取消"],type:["dialog","page","iframe","loading","tips"]},r={v:"3.0.2",ie:function(){var t=navigator.userAgent.toLowerCase();return!!(e.ActiveXObject||"ActiveXObject"in e)&&((t.match(/msie\s(\d+)/)||[])[1]||"11")}(),index:e.layer&&e.layer.v?1e5:0,path:o.getPath,config:function(e,t){return e=e||{},r.cache=o.config=i.extend({},o.config,e),r.path=o.config.path||r.path,"string"==typeof e.extend&&(e.extend=[e.extend]),o.config.path&&r.ready(),e.extend?(a?layui.addcss("modules/layer/"+e.extend):r.link("skin/"+e.extend),this):this},link:function(t,n,a){if(r.path){var o=i("head")[0],s=document.createElement("link");"string"==typeof n&&(a=n);var l=(a||t).replace(/\.|\//g,""),f="layuicss-"+l,c=0;s.rel="stylesheet",s.href=r.path+t,s.id=f,i("#"+f)[0]||o.appendChild(s),"function"==typeof n&&!function u(){return++c>80?e.console&&console.error("layer.css: Invalid"):void(1989===parseInt(i("#"+f).css("width"))?n():setTimeout(u,100))}()}},ready:function(e){var t="skinlayercss",i="302";return a?layui.addcss("modules/layer/default/layer.css?v="+r.v+i,e,t):r.link("skin/default/layer.css?v="+r.v+i,e,t),this},alert:function(e,t,n){var a="function"==typeof t;return a&&(n=t),r.open(i.extend({content:e,yes:n},a?{}:t))},confirm:function(e,t,n,a){var s="function"==typeof t;return s&&(a=n,n=t),r.open(i.extend({content:e,btn:o.btn,yes:n,btn2:a},s?{}:t))},msg:function(e,n,a){var s="function"==typeof n,f=o.config.skin,c=(f?f+" "+f+"-msg":"")||"layui-layer-msg",u=l.anim.length-1;return s&&(a=n),r.open(i.extend({content:e,time:3e3,shade:!1,skin:c,title:!1,closeBtn:!1,btn:!1,resize:!1,end:a},s&&!o.config.skin?{skin:c+" layui-layer-hui",anim:u}:function(){return n=n||{},(n.icon===-1||n.icon===t&&!o.config.skin)&&(n.skin=c+" "+(n.skin||"layui-layer-hui")),n}()))},load:function(e,t){return r.open(i.extend({type:3,icon:e||0,resize:!1,shade:.01},t))},tips:function(e,t,n){return r.open(i.extend({type:4,content:[e,t],closeBtn:!1,time:3e3,shade:!1,resize:!1,fixed:!1,maxWidth:210},n))}},s=function(e){var t=this;t.index=++r.index,t.config=i.extend({},t.config,o.config,e),r.ready(function(){document.body?t.creat():setTimeout(function(){t.creat()},50)})};s.pt=s.prototype;var l=["layui-layer",".layui-layer-title",".layui-layer-main",".layui-layer-dialog","layui-layer-iframe","layui-layer-content","layui-layer-btn","layui-layer-close"];l.anim=["layer-anim","layer-anim-01","layer-anim-02","layer-anim-03","layer-anim-04","layer-anim-05","layer-anim-06"],s.pt.config={type:0,shade:.3,fixed:!0,move:l[1],title:"信息",offset:"auto",area:"auto",closeBtn:1,time:0,zIndex:19891014,maxWidth:360,anim:0,icon:-1,moveType:1,resize:!0,scrollbar:!0,tips:2},s.pt.vessel=function(e,t){var n=this,a=n.index,r=n.config,s=r.zIndex+a,f="object"==typeof r.title,c=r.maxmin&&(1===r.type||2===r.type),u=r.title?'
      '+(f?r.title[0]:r.title)+"
      ":"";return r.zIndex=s,t([r.shade?'
      ':"",'
      '+(e&&2!=r.type?"":u)+'
      '+(0==r.type&&r.icon!==-1?'':"")+(1==r.type&&e?"":r.content||"")+'
      '+function(){var e=c?'':"";return r.closeBtn&&(e+=''),e}()+""+(r.btn?function(){var e="";"string"==typeof r.btn&&(r.btn=[r.btn]);for(var t=0,i=r.btn.length;t'+r.btn[t]+"";return'
      '+e+"
      "}():"")+(r.resize?'':"")+"
      "],u,i('
      ')),n},s.pt.creat=function(){var e=this,t=e.config,a=e.index,s=t.content,f="object"==typeof s,c=i("body");if(!t.id||!i("#"+t.id)[0]){switch("string"==typeof t.area&&(t.area="auto"===t.area?["",""]:[t.area,""]),t.shift&&(t.anim=t.shift),6==r.ie&&(t.fixed=!1),t.type){case 0:t.btn="btn"in t?t.btn:o.btn[0],r.closeAll("dialog");break;case 2:var s=t.content=f?t.content:[t.content||"http://layer.layui.com","auto"];t.content='';break;case 3:delete t.title,delete t.closeBtn,t.icon===-1&&0===t.icon,r.closeAll("loading");break;case 4:f||(t.content=[t.content,"body"]),t.follow=t.content[1],t.content=t.content[0]+'',delete t.title,t.tips="object"==typeof t.tips?t.tips:[t.tips,!0],t.tipsMore||r.closeAll("tips")}e.vessel(f,function(n,r,u){c.append(n[0]),f?function(){2==t.type||4==t.type?function(){i("body").append(n[1])}():function(){s.parents("."+l[0])[0]||(s.data("display",s.css("display")).show().addClass("layui-layer-wrap").wrap(n[1]),i("#"+l[0]+a).find("."+l[5]).before(r))}()}():c.append(n[1]),i(".layui-layer-move")[0]||c.append(o.moveElem=u),e.layero=i("#"+l[0]+a),t.scrollbar||l.html.css("overflow","hidden").attr("layer-full",a)}).auto(a),2==t.type&&6==r.ie&&e.layero.find("iframe").attr("src",s[0]),4==t.type?e.tips():e.offset(),t.fixed&&n.on("resize",function(){e.offset(),(/^\d+%$/.test(t.area[0])||/^\d+%$/.test(t.area[1]))&&e.auto(a),4==t.type&&e.tips()}),t.time<=0||setTimeout(function(){r.close(e.index)},t.time),e.move().callback(),l.anim[t.anim]&&e.layero.addClass(l.anim[t.anim]).data("anim",!0)}},s.pt.auto=function(e){function t(e){e=s.find(e),e.height(f[1]-c-u-2*(0|parseFloat(e.css("padding"))))}var a=this,o=a.config,s=i("#"+l[0]+e);""===o.area[0]&&o.maxWidth>0&&(r.ie&&r.ie<8&&o.btn&&s.width(s.innerWidth()),s.outerWidth()>o.maxWidth&&s.width(o.maxWidth));var f=[s.innerWidth(),s.innerHeight()],c=s.find(l[1]).outerHeight()||0,u=s.find("."+l[6]).outerHeight()||0;switch(o.type){case 2:t("iframe");break;default:""===o.area[1]?o.fixed&&f[1]>=n.height()&&(f[1]=n.height(),t("."+l[5])):t("."+l[5])}return a},s.pt.offset=function(){var e=this,t=e.config,i=e.layero,a=[i.outerWidth(),i.outerHeight()],o="object"==typeof t.offset;e.offsetTop=(n.height()-a[1])/2,e.offsetLeft=(n.width()-a[0])/2,o?(e.offsetTop=t.offset[0],e.offsetLeft=t.offset[1]||e.offsetLeft):"auto"!==t.offset&&("t"===t.offset?e.offsetTop=0:"r"===t.offset?e.offsetLeft=n.width()-a[0]:"b"===t.offset?e.offsetTop=n.height()-a[1]:"l"===t.offset?e.offsetLeft=0:"lt"===t.offset?(e.offsetTop=0,e.offsetLeft=0):"lb"===t.offset?(e.offsetTop=n.height()-a[1],e.offsetLeft=0):"rt"===t.offset?(e.offsetTop=0,e.offsetLeft=n.width()-a[0]):"rb"===t.offset?(e.offsetTop=n.height()-a[1],e.offsetLeft=n.width()-a[0]):e.offsetTop=t.offset),t.fixed||(e.offsetTop=/%$/.test(e.offsetTop)?n.height()*parseFloat(e.offsetTop)/100:parseFloat(e.offsetTop),e.offsetLeft=/%$/.test(e.offsetLeft)?n.width()*parseFloat(e.offsetLeft)/100:parseFloat(e.offsetLeft),e.offsetTop+=n.scrollTop(),e.offsetLeft+=n.scrollLeft()),i.attr("minLeft")&&(e.offsetTop=n.height()-(i.find(l[1]).outerHeight()||0),e.offsetLeft=i.css("left")),i.css({top:e.offsetTop,left:e.offsetLeft})},s.pt.tips=function(){var e=this,t=e.config,a=e.layero,o=[a.outerWidth(),a.outerHeight()],r=i(t.follow);r[0]||(r=i("body"));var s={width:r.outerWidth(),height:r.outerHeight(),top:r.offset().top,left:r.offset().left},f=a.find(".layui-layer-TipsG"),c=t.tips[0];t.tips[1]||f.remove(),s.autoLeft=function(){s.left+o[0]-n.width()>0?(s.tipLeft=s.left+s.width-o[0],f.css({right:12,left:"auto"})):s.tipLeft=s.left},s.where=[function(){s.autoLeft(),s.tipTop=s.top-o[1]-10,f.removeClass("layui-layer-TipsB").addClass("layui-layer-TipsT").css("border-right-color",t.tips[1])},function(){s.tipLeft=s.left+s.width+10,s.tipTop=s.top,f.removeClass("layui-layer-TipsL").addClass("layui-layer-TipsR").css("border-bottom-color",t.tips[1])},function(){s.autoLeft(),s.tipTop=s.top+s.height+10,f.removeClass("layui-layer-TipsT").addClass("layui-layer-TipsB").css("border-right-color",t.tips[1])},function(){s.tipLeft=s.left-o[0]-10,s.tipTop=s.top,f.removeClass("layui-layer-TipsR").addClass("layui-layer-TipsL").css("border-bottom-color",t.tips[1])}],s.where[c-1](),1===c?s.top-(n.scrollTop()+o[1]+16)<0&&s.where[2]():2===c?n.width()-(s.left+s.width+o[0]+16)>0||s.where[3]():3===c?s.top-n.scrollTop()+s.height+o[1]+16-n.height()>0&&s.where[0]():4===c&&o[0]+16-s.left>0&&s.where[1](),a.find("."+l[5]).css({"background-color":t.tips[1],"padding-right":t.closeBtn?"30px":""}),a.css({left:s.tipLeft-(t.fixed?n.scrollLeft():0),top:s.tipTop-(t.fixed?n.scrollTop():0)})},s.pt.move=function(){var e=this,t=e.config,a=i(document),s=e.layero,l=s.find(t.move),f=s.find(".layui-layer-resize"),c={};return t.move&&l.css("cursor","move"),l.on("mousedown",function(e){e.preventDefault(),t.move&&(c.moveStart=!0,c.offset=[e.clientX-parseFloat(s.css("left")),e.clientY-parseFloat(s.css("top"))],o.moveElem.css("cursor","move").show())}),f.on("mousedown",function(e){e.preventDefault(),c.resizeStart=!0,c.offset=[e.clientX,e.clientY],c.area=[s.outerWidth(),s.outerHeight()],o.moveElem.css("cursor","se-resize").show()}),a.on("mousemove",function(i){if(c.moveStart){var a=i.clientX-c.offset[0],o=i.clientY-c.offset[1],l="fixed"===s.css("position");if(i.preventDefault(),c.stX=l?0:n.scrollLeft(),c.stY=l?0:n.scrollTop(),!t.moveOut){var f=n.width()-s.outerWidth()+c.stX,u=n.height()-s.outerHeight()+c.stY;af&&(a=f),ou&&(o=u)}s.css({left:a,top:o})}if(t.resize&&c.resizeStart){var a=i.clientX-c.offset[0],o=i.clientY-c.offset[1];i.preventDefault(),r.style(e.index,{width:c.area[0]+a,height:c.area[1]+o}),c.isResize=!0,t.resizing&&t.resizing(s)}}).on("mouseup",function(e){c.moveStart&&(delete c.moveStart,o.moveElem.hide(),t.moveEnd&&t.moveEnd(s)),c.resizeStart&&(delete c.resizeStart,o.moveElem.hide())}),e},s.pt.callback=function(){function e(){var e=a.cancel&&a.cancel(t.index,n);e===!1||r.close(t.index)}var t=this,n=t.layero,a=t.config;t.openLayer(),a.success&&(2==a.type?n.find("iframe").on("load",function(){a.success(n,t.index)}):a.success(n,t.index)),6==r.ie&&t.IE6(n),n.find("."+l[6]).children("a").on("click",function(){var e=i(this).index();if(0===e)a.yes?a.yes(t.index,n):a.btn1?a.btn1(t.index,n):r.close(t.index);else{var o=a["btn"+(e+1)]&&a["btn"+(e+1)](t.index,n);o===!1||r.close(t.index)}}),n.find("."+l[7]).on("click",e),a.shadeClose&&i("#layui-layer-shade"+t.index).on("click",function(){r.close(t.index)}),n.find(".layui-layer-min").on("click",function(){var e=a.min&&a.min(n);e===!1||r.min(t.index,a)}),n.find(".layui-layer-max").on("click",function(){i(this).hasClass("layui-layer-maxmin")?(r.restore(t.index),a.restore&&a.restore(n)):(r.full(t.index,a),setTimeout(function(){a.full&&a.full(n)},100))}),a.end&&(o.end[t.index]=a.end)},o.reselect=function(){i.each(i("select"),function(e,t){var n=i(this);n.parents("."+l[0])[0]||1==n.attr("layer")&&i("."+l[0]).length<1&&n.removeAttr("layer").show(),n=null})},s.pt.IE6=function(e){i("select").each(function(e,t){var n=i(this);n.parents("."+l[0])[0]||"none"===n.css("display")||n.attr({layer:"1"}).hide(),n=null})},s.pt.openLayer=function(){var e=this;r.zIndex=e.config.zIndex,r.setTop=function(e){var t=function(){r.zIndex++,e.css("z-index",r.zIndex+1)};return r.zIndex=parseInt(e[0].style.zIndex),e.on("mousedown",t),r.zIndex}},o.record=function(e){var t=[e.width(),e.height(),e.position().top,e.position().left+parseFloat(e.css("margin-left"))];e.find(".layui-layer-max").addClass("layui-layer-maxmin"),e.attr({area:t})},o.rescollbar=function(e){l.html.attr("layer-full")==e&&(l.html[0].style.removeProperty?l.html[0].style.removeProperty("overflow"):l.html[0].style.removeAttribute("overflow"),l.html.removeAttr("layer-full"))},e.layer=r,r.getChildFrame=function(e,t){return t=t||i("."+l[4]).attr("times"),i("#"+l[0]+t).find("iframe").contents().find(e)},r.getFrameIndex=function(e){return i("#"+e).parents("."+l[4]).attr("times")},r.iframeAuto=function(e){if(e){var t=r.getChildFrame("html",e).outerHeight(),n=i("#"+l[0]+e),a=n.find(l[1]).outerHeight()||0,o=n.find("."+l[6]).outerHeight()||0;n.css({height:t+a+o}),n.find("iframe").css({height:t})}},r.iframeSrc=function(e,t){i("#"+l[0]+e).find("iframe").attr("src",t)},r.style=function(e,t,n){var a=i("#"+l[0]+e),r=a.find(".layui-layer-content"),s=a.attr("type"),f=a.find(l[1]).outerHeight()||0,c=a.find("."+l[6]).outerHeight()||0;a.attr("minLeft");s!==o.type[3]&&s!==o.type[4]&&(n||(parseFloat(t.width)<=260&&(t.width=260),parseFloat(t.height)-f-c<=64&&(t.height=64+f+c)),a.css(t),c=a.find("."+l[6]).outerHeight(),s===o.type[2]?a.find("iframe").css({height:parseFloat(t.height)-f-c}):r.css({height:parseFloat(t.height)-f-c-parseFloat(r.css("padding-top"))-parseFloat(r.css("padding-bottom"))}))},r.min=function(e,t){var a=i("#"+l[0]+e),s=a.find(l[1]).outerHeight()||0,f=a.attr("minLeft")||181*o.minIndex+"px",c=a.css("position");o.record(a),o.minLeft[0]&&(f=o.minLeft[0],o.minLeft.shift()),a.attr("position",c),r.style(e,{width:180,height:s,left:f,top:n.height()-s,position:"fixed",overflow:"hidden"},!0),a.find(".layui-layer-min").hide(),"page"===a.attr("type")&&a.find(l[4]).hide(),o.rescollbar(e),a.attr("minLeft")||o.minIndex++,a.attr("minLeft",f)},r.restore=function(e){var t=i("#"+l[0]+e),n=t.attr("area").split(",");t.attr("type");r.style(e,{width:parseFloat(n[0]),height:parseFloat(n[1]),top:parseFloat(n[2]),left:parseFloat(n[3]),position:t.attr("position"),overflow:"visible"},!0),t.find(".layui-layer-max").removeClass("layui-layer-maxmin"),t.find(".layui-layer-min").show(),"page"===t.attr("type")&&t.find(l[4]).show(),o.rescollbar(e)},r.full=function(e){var t,a=i("#"+l[0]+e);o.record(a),l.html.attr("layer-full")||l.html.css("overflow","hidden").attr("layer-full",e),clearTimeout(t),t=setTimeout(function(){var t="fixed"===a.css("position");r.style(e,{top:t?0:n.scrollTop(),left:t?0:n.scrollLeft(),width:n.width(),height:n.height()},!0),a.find(".layui-layer-min").hide()},100)},r.title=function(e,t){var n=i("#"+l[0]+(t||r.index)).find(l[1]);n.html(e)},r.close=function(e){var t=i("#"+l[0]+e),n=t.attr("type"),a="layer-anim-close";if(t[0]){var s="layui-layer-wrap",f=function(){if(n===o.type[1]&&"object"===t.attr("conType")){t.children(":not(."+l[5]+")").remove();for(var a=t.find("."+s),r=0;r<2;r++)a.unwrap();a.css("display",a.data("display")).removeClass(s)}else{if(n===o.type[2])try{var f=i("#"+l[4]+e)[0];f.contentWindow.document.write(""),f.contentWindow.close(),t.find("."+l[5])[0].removeChild(f)}catch(c){}t[0].innerHTML="",t.remove()}"function"==typeof o.end[e]&&o.end[e](),delete o.end[e]};t.data("anim")&&t.addClass(a),i("#layui-layer-moves, #layui-layer-shade"+e).remove(),6==r.ie&&o.reselect(),o.rescollbar(e),t.attr("minLeft")&&(o.minIndex--,o.minLeft.push(t.attr("minLeft"))),setTimeout(function(){f()},r.ie&&r.ie<10||!t.data("anim")?0:200)}},r.closeAll=function(e){i.each(i("."+l[0]),function(){var t=i(this),n=e?t.attr("type")===e:1;n&&r.close(t.attr("times")),n=null})};var f=r.cache||{},c=function(e){return f.skin?" "+f.skin+" "+f.skin+"-"+e:""};r.prompt=function(e,t){var a="";if(e=e||{},"function"==typeof e&&(t=e),e.area){var o=e.area;a='style="width: '+o[0]+"; height: "+o[1]+';"',delete e.area}var s,l=2==e.formType?'":function(){return''}(),f=e.success;return delete e.success,r.open(i.extend({type:1,btn:["确定","取消"],content:l,skin:"layui-layer-prompt"+c("prompt"),maxWidth:n.width(),success:function(e){s=e.find(".layui-layer-input"),s.focus(),"function"==typeof f&&f(e)},resize:!1,yes:function(i){var n=s.val();""===n?s.focus():n.length>(e.maxlength||500)?r.tips("最多输入"+(e.maxlength||500)+"个字数",s,{tips:1}):t&&t(n,i,s)}},e))},r.tab=function(e){e=e||{};var t=e.tab||{},n=e.success;return delete e.success,r.open(i.extend({type:1,skin:"layui-layer-tab"+c("tab"),resize:!1,title:function(){var e=t.length,i=1,n="";if(e>0)for(n=''+t[0].title+"";i"+t[i].title+"";return n}(),content:'
        '+function(){var e=t.length,i=1,n="";if(e>0)for(n='
      • '+(t[0].content||"no content")+"
        • ";i'+(t[i].content||"no content")+"";return n}()+"
      ",success:function(t){var a=t.find(".layui-layer-title").children(),o=t.find(".layui-layer-tabmain").children();a.on("mousedown",function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0;var n=i(this),a=n.index();n.addClass("layui-layer-tabnow").siblings().removeClass("layui-layer-tabnow"),o.eq(a).show().siblings().hide(),"function"==typeof e.change&&e.change(a)}),"function"==typeof n&&n(t)}},e))},r.photos=function(t,n,a){function o(e,t,i){var n=new Image;return n.src=e,n.complete?t(n):(n.onload=function(){n.onload=null,t(n)},void(n.onerror=function(e){n.onerror=null,i(e)}))}var s={};if(t=t||{},t.photos){var l=t.photos.constructor===Object,f=l?t.photos:{},u=f.data||[],d=f.start||0;s.imgIndex=(0|d)+1,t.img=t.img||"img";var y=t.success;if(delete t.success,l){if(0===u.length)return r.msg("没有图片")}else{var p=i(t.photos),h=function(){u=[],p.find(t.img).each(function(e){var t=i(this);t.attr("layer-index",e),u.push({alt:t.attr("alt"),pid:t.attr("layer-pid"),src:t.attr("layer-src")||t.attr("src"),thumb:t.attr("src")})})};if(h(),0===u.length)return;if(n||p.on("click",t.img,function(){var e=i(this),n=e.attr("layer-index");r.photos(i.extend(t,{photos:{start:n,data:u,tab:t.tab},full:t.full}),!0),h()}),!n)return}s.imgprev=function(e){s.imgIndex--,s.imgIndex<1&&(s.imgIndex=u.length),s.tabimg(e)},s.imgnext=function(e,t){s.imgIndex++,s.imgIndex>u.length&&(s.imgIndex=1,t)||s.tabimg(e)},s.keyup=function(e){if(!s.end){var t=e.keyCode;e.preventDefault(),37===t?s.imgprev(!0):39===t?s.imgnext(!0):27===t&&r.close(s.index)}},s.tabimg=function(e){u.length<=1||(f.start=s.imgIndex-1,r.close(s.index),setTimeout(function(){r.photos(t,!0,e)},200))},s.event=function(){s.bigimg.hover(function(){s.imgsee.show()},function(){s.imgsee.hide()}),s.bigimg.find(".layui-layer-imgprev").on("click",function(e){e.preventDefault(),s.imgprev()}),s.bigimg.find(".layui-layer-imgnext").on("click",function(e){e.preventDefault(),s.imgnext()}),i(document).on("keyup",s.keyup)},s.loadi=r.load(1,{shade:!("shade"in t)&&.9,scrollbar:!1}),o(u[d].src,function(n){r.close(s.loadi),s.index=r.open(i.extend({type:1,id:"layui-layer-photos",area:function(){var a=[n.width,n.height],o=[i(e).width()-100,i(e).height()-100];if(!t.full&&(a[0]>o[0]||a[1]>o[1])){var r=[a[0]/o[0],a[1]/o[1]];r[0]>r[1]?(a[0]=a[0]/r[0],a[1]=a[1]/r[0]):r[0]'+(u[d].alt||
      '+(u.length>1?'':"")+'
      '+(u[d].alt||"")+""+s.imgIndex+"/"+u.length+"
      ",success:function(e,i){s.bigimg=e.find(".layui-layer-phimg"),s.imgsee=e.find(".layui-layer-imguide,.layui-layer-imgbar"),s.event(e),t.tab&&t.tab(u[d],e),"function"==typeof y&&y(e)},end:function(){s.end=!0,i(document).off("keyup",s.keyup)}},t))},function(){r.close(s.loadi),r.msg("当前图片地址异常
      是否继续查看下一张？",{time:3e4,btn:["下一张","不看了"],yes:function(){u.length>1&&s.imgnext(!0,!0)}})})}},o.run=function(t){i=t,n=i(e),l.html=i("html"),r.open=function(e){var t=new s(e);return t.index}},e.layui&&layui.define?(r.ready(),layui.define("jquery",function(t){r.path=layui.cache.dir,o.run(layui.jquery),e.layer=r,t("layer",r)})):"function"==typeof define&&define.amd?define(["jquery"],function(){return o.run(e.jQuery),r}):function(){o.run(e.jQuery),r.ready()}()}(window); -------------------------------------------------------------------------------- /js/functions.js: -------------------------------------------------------------------------------- 1 | /************************************************** 2 | * MKOnlinePlayer v2.4 3 | * 封装函数及UI交互模块 4 | * 编写：mengkun(https://mkblog.cn) 5 | * 时间：2018-3-11 6 | *************************************************/ 7 | // 判断是否是移动设备 8 | var isMobile = { 9 | Android: function() { 10 | return navigator.userAgent.match(/Android/i) ? true : false; 11 | }, 12 | BlackBerry: function() { 13 | return navigator.userAgent.match(/BlackBerry/i) ? true : false; 14 | }, 15 | iOS: function() { 16 | return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; 17 | }, 18 | Windows: function() { 19 | return navigator.userAgent.match(/IEMobile/i) ? true : false; 20 | }, 21 | any: function() { 22 | return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); 23 | } 24 | }; 25 | 26 | $(function(){ 27 | if(mkPlayer.debug) { 28 | console.warn('播放器调试模式已开启，正常使用时请在 js/player.js 中按说明关闭调试模式'); 29 | } 30 | 31 | rem.isMobile = isMobile.any(); // 判断是否是移动设备 32 | rem.webTitle = document.title; // 记录页面原本的标题 33 | rem.errCount = 0; // 连续播放失败的歌曲数归零 34 | 35 | initProgress(); // 初始化音量条、进度条（进度条初始化要在 Audio 前，别问我为什么……） 36 | initAudio(); // 初始化 audio 标签，事件绑定 37 | 38 | 39 | if(rem.isMobile) { // 加了滚动条插件和没加滚动条插件所操作的对象是不一样的 40 | rem.sheetList = $("#sheet"); 41 | rem.mainList = $("#main-list"); 42 | } else { 43 | // 滚动条初始化(只在非移动端启用滚动条控件) 44 | $("#main-list,#sheet").mCustomScrollbar({ 45 | theme:"minimal", 46 | advanced:{ 47 | updateOnContentResize: true // 数据更新后自动刷新滚动条 48 | } 49 | }); 50 | 51 | rem.sheetList = $("#sheet .mCSB_container"); 52 | rem.mainList = $("#main-list .mCSB_container"); 53 | } 54 | 55 | addListhead(); // 列表头 56 | addListbar("loading"); // 列表加载中 57 | 58 | // 顶部按钮点击处理 59 | $(".btn").click(function(){ 60 | switch($(this).data("action")) { 61 | case "player": // 播放器 62 | dataBox("player"); 63 | break; 64 | case "search": // 搜索 65 | searchBox(); 66 | break; 67 | 68 | case "playing": // 正在播放 69 | loadList(1); // 显示正在播放列表 70 | break; 71 | 72 | case "sheet": // 播放列表 73 | dataBox("sheet"); // 在主界面显示出音乐专辑 74 | break; 75 | } 76 | }); 77 | 78 | // 列表项双击播放 79 | $(".music-list").on("dblclick",".list-item", function() { 80 | var num = parseInt($(this).data("no")); 81 | if(isNaN(num)) return false; 82 | listClick(num); 83 | }); 84 | 85 | // 移动端列表项单击播放 86 | $(".music-list").on("click",".list-item", function() { 87 | if(rem.isMobile) { 88 | var num = parseInt($(this).data("no")); 89 | if(isNaN(num)) return false; 90 | listClick(num); 91 | } 92 | }); 93 | 94 | // 小屏幕点击右侧小点查看歌曲详细信息 95 | $(".music-list").on("click",".list-mobile-menu", function() { 96 | var num = parseInt($(this).parent().data("no")); 97 | musicInfo(rem.dislist, num); 98 | return false; 99 | }); 100 | 101 | // 列表鼠标移过显示对应的操作按钮 102 | $(".music-list").on("mousemove",".list-item", function() { 103 | var num = parseInt($(this).data("no")); 104 | if(isNaN(num)) return false; 105 | // 还没有追加菜单则加上菜单 106 | if(!$(this).data("loadmenu")) { 107 | var target = $(this).find(".music-name"); 108 | var html = '' + 109 | target.html() + 110 | '' + 111 | '
      ' + 112 | '' + 113 | '' + 114 | '' + 115 | '
      '; 116 | target.html(html); 117 | $(this).data("loadmenu", true); 118 | } 119 | }); 120 | 121 | // 列表中的菜单点击 122 | $(".music-list").on("click",".icon-play,.icon-download,.icon-share", function() { 123 | var num = parseInt($(this).parent().data("no")); 124 | if(isNaN(num)) return false; 125 | switch($(this).data("function")) { 126 | case "play": // 播放 127 | listClick(num); // 调用列表点击处理函数 128 | break; 129 | case "download": // 下载 130 | ajaxUrl(musicList[rem.dislist].item[num], download); 131 | break; 132 | case "share": // 分享 133 | // ajax 请求数据 134 | ajaxUrl(musicList[rem.dislist].item[num], ajaxShare); 135 | break; 136 | } 137 | return true; 138 | }); 139 | 140 | // 点击加载更多 141 | $(".music-list").on("click",".list-loadmore", function() { 142 | $(".list-loadmore").removeClass('list-loadmore'); 143 | $(".list-loadmore").html('加载中...'); 144 | ajaxSearch(); 145 | }); 146 | 147 | // 点击专辑显示专辑歌曲 148 | $("#sheet").on("click",".sheet-cover,.sheet-name", function() { 149 | var num = parseInt($(this).parent().data("no")); 150 | // 是用户列表，但是还没有加载数据 151 | if(musicList[num].item.length === 0 && musicList[num].creatorID) { 152 | layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); // 0代表加载的风格，支持0-2 153 | // ajax加载数据 154 | ajaxPlayList(musicList[num].id, num, loadList); 155 | return true; 156 | } 157 | loadList(num); 158 | }); 159 | 160 | // 点击同步云音乐 161 | $("#sheet").on("click",".login-in", function() { 162 | layer.prompt( 163 | { 164 | title: '请输入您的网易云 UID', 165 | // value: '', // 默认值 166 | btn: ['确定', '取消', '帮助'], 167 | btn3: function(index, layero){ 168 | layer.open({ 169 | title: '如何获取您的网易云UID？' 170 | ,shade: 0.6 //遮罩透明度 171 | ,anim: 0 //0-6的动画形式，-1不开启 172 | ,content: 173 | '1、首先点我(http://music.163.com/)打开网易云音乐官网
      ' + 174 | '2、然后点击页面右上角的“登录”，登录您的账号
      ' + 175 | '3、点击您的头像，进入个人中心
      ' + 176 | '4、此时浏览器地址栏 /user/home?id= 后面的数字就是您的网易云 UID' 177 | }); 178 | } 179 | }, 180 | function(val, index){ // 输入后的回调函数 181 | if(isNaN(val)) { 182 | layer.msg('uid 只能是数字',{anim: 6}); 183 | return false; 184 | } 185 | layer.close(index); // 关闭输入框 186 | ajaxUserList(val); 187 | }); 188 | }); 189 | 190 | // 刷新用户列表 191 | $("#sheet").on("click",".login-refresh", function() { 192 | playerSavedata('ulist', ''); 193 | layer.msg('刷新歌单'); 194 | clearUserlist(); 195 | }); 196 | 197 | // 退出登录 198 | $("#sheet").on("click",".login-out", function() { 199 | playerSavedata('uid', ''); 200 | playerSavedata('ulist', ''); 201 | layer.msg('已退出'); 202 | clearUserlist(); 203 | }); 204 | 205 | // 播放、暂停按钮的处理 206 | $("#music-info").click(function(){ 207 | if(rem.playid === undefined) { 208 | layer.msg('请先播放歌曲'); 209 | return false; 210 | } 211 | 212 | musicInfo(rem.playlist, rem.playid); 213 | }); 214 | 215 | // 播放、暂停按钮的处理 216 | $(".btn-play").click(function(){ 217 | pause(); 218 | }); 219 | 220 | // 循环顺序的处理 221 | $(".btn-order").click(function(){ 222 | orderChange(); 223 | }); 224 | // 上一首歌 225 | $(".btn-prev").click(function(){ 226 | prevMusic(); 227 | }); 228 | 229 | // 下一首 230 | $(".btn-next").click(function(){ 231 | nextMusic(); 232 | }); 233 | 234 | // 静音按钮点击事件 235 | $(".btn-quiet").click(function(){ 236 | var oldVol; // 之前的音量值 237 | if($(this).is('.btn-state-quiet')) { 238 | oldVol = $(this).data("volume"); 239 | oldVol = oldVol? oldVol: (rem.isMobile? 1: mkPlayer.volume); // 没找到记录的音量，则重置为默认音量 240 | $(this).removeClass("btn-state-quiet"); // 取消静音 241 | } else { 242 | oldVol = volume_bar.percent; 243 | $(this).addClass("btn-state-quiet"); // 开启静音 244 | $(this).data("volume", oldVol); // 记录当前音量值 245 | oldVol = 0; 246 | } 247 | playerSavedata('volume', oldVol); // 存储音量信息 248 | volume_bar.goto(oldVol); // 刷新音量显示 249 | if(rem.audio[0] !== undefined) rem.audio[0].volume = oldVol; // 应用音量 250 | }); 251 | 252 | if((mkPlayer.coverbg === true && !rem.isMobile) || (mkPlayer.mcoverbg === true && rem.isMobile)) { // 开启了封面背景 253 | 254 | if(rem.isMobile) { // 移动端采用另一种模糊方案 255 | $('#blur-img').html('
      '); 256 | } else { 257 | // 背景图片初始化 258 | $('#blur-img').backgroundBlur({ 259 | // imageURL : '', // URL to the image that will be used for blurring 260 | blurAmount : 50, // 模糊度 261 | imageClass : 'blured-img', // 背景区应用样式 262 | overlayClass : 'blur-mask', // 覆盖背景区class，可用于遮罩或额外的效果 263 | // duration: 0, // 图片淡出时间 264 | endOpacity : 1 // 图像最终的不透明度 265 | }); 266 | } 267 | 268 | $('.blur-mask').fadeIn(1000); // 遮罩层淡出 269 | } 270 | 271 | // 图片加载失败处理 272 | $('img').error(function(){ 273 | $(this).attr('src', 'images/player_cover.png'); 274 | }); 275 | 276 | // 初始化播放列表 277 | initList(); 278 | }); 279 | 280 | // 展现系统列表中任意首歌的歌曲信息 281 | function musicInfo(list, index) { 282 | var music = musicList[list].item[index]; 283 | var tempStr = '歌名：' + music.name + 284 | '
      歌手：' + music.artist + 285 | '
      专辑：' + music.album; 286 | 287 | if(list == rem.playlist && index == rem.playid) { // 当前正在播放这首歌，那么还可以顺便获取一下时长。。 288 | tempStr += '
      时长：' + formatTime(rem.audio[0].duration); 289 | } 290 | 291 | tempStr += '
      操作：' + 292 | '下载' + 293 | '外链'; 294 | 295 | layer.open({ 296 | type: 0, 297 | shade: false, 298 | title: false, //不显示标题 299 | btn: false, 300 | content: tempStr 301 | }); 302 | 303 | if(mkPlayer.debug) { 304 | console.info('id: "' + music.id + '",\n' + 305 | 'name: "' + music.name + '",\n' + 306 | 'artist: "' + music.artist + '",\n' + 307 | 'album: "' + music.album + '",\n' + 308 | 'source: "' + music.source + '",\n' + 309 | 'url_id: "' + music.url_id + '",\n' + 310 | 'pic_id: "' + music.pic_id + '",\n' + 311 | 'lyric_id: "' + music.lyric_id + '",\n' + 312 | 'pic: "' + music.pic + '",\n' + 313 | 'url: ""'); 314 | // 'url: "' + music.url + '"'); 315 | } 316 | } 317 | 318 | // 展现搜索弹窗 319 | function searchBox() { 320 | var tmpHtml = '
      ' + 321 | '
      ' + 322 | ' ' + 323 | ' ' + 324 | '
      ' + 325 | '
      ' + 326 | ' ' + 327 | ' ' + 328 | ' ' + 329 | ' ' + 330 | ' ' + 331 | '
      ' + 332 | '
      '; 333 | layer.open({ 334 | type: 1, 335 | shade: false, 336 | title: false, // 不显示标题 337 | shade: 0.5, // 遮罩颜色深度 338 | shadeClose: true, 339 | content: tmpHtml, 340 | cancel: function(){ 341 | } 342 | }); 343 | 344 | // 恢复上一次的输入 345 | $("#search-wd").focus().val(rem.wd); 346 | $("#music-source input[name='source'][value='" + rem.source + "']").prop("checked", "checked"); 347 | } 348 | 349 | // 搜索提交 350 | function searchSubmit() { 351 | var wd = $("#search-wd").val(); 352 | if(!wd) { 353 | layer.msg('搜索内容不能为空', {anim:6, offset: 't'}); 354 | $("#search-wd").focus(); 355 | return false; 356 | } 357 | rem.source = $("#music-source input[name='source']:checked").val(); 358 | 359 | layer.closeAll('page'); // 关闭搜索框 360 | 361 | rem.loadPage = 1; // 已加载页数复位 362 | rem.wd = wd; // 搜索词 363 | ajaxSearch(); // 加载搜索结果 364 | return false; 365 | } 366 | 367 | // 下载正在播放的这首歌 368 | function thisDownload(obj) { 369 | ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], download); 370 | } 371 | 372 | // 分享正在播放的这首歌 373 | function thisShare(obj) { 374 | ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], ajaxShare); 375 | } 376 | 377 | // 下载歌曲 378 | // 参数：包含歌曲信息的数组 379 | function download(music) { 380 | if(music.url == 'err' || music.url == "" || music.url == null) { 381 | layer.msg('这首歌不支持下载'); 382 | return; 383 | } 384 | openDownloadDialog(music.url, music.name + ' - ' + music.artist); 385 | } 386 | 387 | /** 388 | * 通用的打开下载对话框方法，没有测试过具体兼容性 389 | * @param url 下载地址，也可以是一个blob对象，必选 390 | * @param saveName 保存文件名，可选 391 | * http://www.cnblogs.com/liuxianan/p/js-download.html 392 | */ 393 | function openDownloadDialog(url, saveName) 394 | { 395 | if(typeof url == 'object' && url instanceof Blob) 396 | { 397 | url = URL.createObjectURL(url); // 创建blob地址 398 | } 399 | var aLink = document.createElement('a'); 400 | aLink.href = url; 401 | aLink.target = "_blank"; 402 | aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 403 | var event; 404 | if(window.MouseEvent) event = new MouseEvent('click'); 405 | else 406 | { 407 | event = document.createEvent('MouseEvents'); 408 | event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 409 | } 410 | aLink.dispatchEvent(event); 411 | } 412 | 413 | // 获取外链的ajax回调函数 414 | // 参数：包含音乐信息的数组 415 | function ajaxShare(music) { 416 | if(music.url == 'err' || music.url == "" || music.url == null) { 417 | layer.msg('这首歌不支持外链获取'); 418 | return; 419 | } 420 | 421 | var tmpHtml = '

      ' + music.artist + ' - ' + music.name + ' 的外链地址为：

      ' + 422 | '' + 423 | ''; 424 | 425 | layer.open({ 426 | title: '歌曲外链分享' 427 | ,content: tmpHtml 428 | }); 429 | } 430 | 431 | // 改变右侧封面图像 432 | // 新的图像地址 433 | function changeCover(music) { 434 | var img = music.pic; // 获取歌曲封面 435 | var animate = false,imgload = false; 436 | 437 | if(!img) { // 封面为空 438 | ajaxPic(music, changeCover); // 获取歌曲封面图 439 | img == "err"; // 暂时用无图像占个位... 440 | } 441 | 442 | if(img == "err") { 443 | img = "images/player_cover.png"; 444 | } else { 445 | if(mkPlayer.mcoverbg === true && rem.isMobile) // 移动端封面 446 | { 447 | $("#music-cover").load(function(){ 448 | $("#mobile-blur").css('background-image', 'url("' + img + '")'); 449 | }); 450 | } 451 | else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面 452 | { 453 | $("#music-cover").load(function(){ 454 | if(animate) { // 渐变动画也已完成 455 | $("#blur-img").backgroundBlur(img); // 替换图像并淡出 456 | $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 457 | } else { 458 | imgload = true; // 告诉下面的函数，图片已准备好 459 | } 460 | 461 | }); 462 | 463 | // 渐变动画 464 | $("#blur-img").animate({opacity: "0.2"}, 1000, function(){ 465 | if(imgload) { // 如果图片已经加载好了 466 | $("#blur-img").backgroundBlur(img); // 替换图像并淡出 467 | $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 468 | } else { 469 | animate = true; // 等待图像加载完 470 | } 471 | }); 472 | } 473 | } 474 | 475 | $("#music-cover").attr("src", img); // 改变右侧封面 476 | $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像 477 | } 478 | 479 | 480 | // 向列表中载入某个播放列表 481 | function loadList(list) { 482 | if(musicList[list].isloading === true) { 483 | layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); 484 | return true; 485 | } 486 | 487 | rem.dislist = list; // 记录当前显示的列表 488 | 489 | dataBox("list"); // 在主界面显示出播放列表 490 | 491 | // 调试信息输出 492 | if(mkPlayer.debug) { 493 | if(musicList[list].id) { 494 | console.log('加载播放列表 ' + list + ' - ' + musicList[list].name + '\n' + 495 | 'id: ' + musicList[list].id + ',\n' + 496 | 'name: "' + musicList[list].name + '",\n' + 497 | 'cover: "' + musicList[list].cover + '",\n' + 498 | 'item: []'); 499 | } else { 500 | console.log('加载播放列表 ' + list + ' - ' + musicList[list].name); 501 | } 502 | } 503 | 504 | rem.mainList.html(''); // 清空列表中原有的元素 505 | addListhead(); // 向列表中加入列表头 506 | 507 | if(musicList[list].item.length == 0) { 508 | addListbar("nodata"); // 列表中没有数据 509 | } else { 510 | 511 | // 逐项添加数据 512 | for(var i=0; i' + 549 | ' 专辑' + 550 | ' ' + 551 | ' ' + 552 | ' 歌手' + 553 | ' ' + 554 | ' ' + 555 | ' 歌曲' + 556 | ' ' + 557 | ''; 558 | rem.mainList.append(html); 559 | } 560 | 561 | // 列表中新增一项 562 | // 参数：编号、名字、歌手、专辑 563 | function addItem(no, name, auth, album) { 564 | var html = '
      ' + 565 | ' ' + no + '' + 566 | ' ' + 567 | ' ' + album + '' + 568 | ' ' + auth + '' + 569 | ' ' + name + '' + 570 | '
      '; 571 | rem.mainList.append(html); 572 | } 573 | 574 | // 加载列表中的提示条 575 | // 参数：类型（more、nomore、loading、nodata、clear） 576 | function addListbar(types) { 577 | var html 578 | switch(types) { 579 | case "more": // 还可以加载更多 580 | html = '
      点击加载更多...
      '; 581 | break; 582 | 583 | case "nomore": // 数据加载完了 584 | html = '
      全都加载完了
      '; 585 | break; 586 | 587 | case "loading": // 加载中 588 | html = '
      播放列表加载中...
      '; 589 | break; 590 | 591 | case "nodata": // 列表中没有内容 592 | html = '
      可能是个假列表，什么也没有
      '; 593 | break; 594 | 595 | case "clear": // 清空列表 596 | html = '
      清空列表
      '; 597 | break; 598 | } 599 | rem.mainList.append(html); 600 | } 601 | 602 | // 将时间格式化为 00:00 的格式 603 | // 参数：原始时间 604 | function formatTime(time){ 605 | var hour,minute,second; 606 | hour = String(parseInt(time/3600,10)); 607 | if(hour.length == 1) hour='0' + hour; 608 | 609 | minute=String(parseInt((time%3600)/60,10)); 610 | if(minute.length == 1) minute='0'+minute; 611 | 612 | second=String(parseInt(time%60,10)); 613 | if(second.length == 1) second='0'+second; 614 | 615 | if(hour > 0) { 616 | return hour + ":" + minute + ":" + second; 617 | } else { 618 | return minute + ":" + second; 619 | } 620 | } 621 | 622 | // url编码 623 | // 输入参数：待编码的字符串 624 | function urlEncode(String) { 625 | return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22"); 626 | } 627 | 628 | // 在 ajax 获取了音乐的信息后再进行更新 629 | // 参数：要进行更新的音乐 630 | function updateMinfo(music) { 631 | // 不含有 id 的歌曲无法更新 632 | if(!music.id) return false; 633 | 634 | // 循环查找播放列表并更新信息 635 | for(var i=0; i' + 674 | ' ' + 675 | '

      ' +name+ '

      ' + 676 | ''; 677 | rem.sheetList.append(html); 678 | } 679 | // 清空歌单显示 680 | function clearSheet() { 681 | rem.sheetList.html(''); 682 | } 683 | 684 | // 歌单列表底部登陆条 685 | function sheetBar() { 686 | var barHtml; 687 | if(playerReaddata('uid')) { 688 | barHtml = '已同步 ' + rem.uname + ' 的歌单 '; 689 | } else { 690 | barHtml = '我的歌单 '; 691 | } 692 | barHtml = '
      ' + 693 | '
      ' + barHtml + 694 | '
      '; 695 | rem.sheetList.append(barHtml); 696 | } 697 | 698 | // 选择要显示哪个数据区 699 | // 参数：要显示的数据区（list、sheet、player） 700 | function dataBox(choose) { 701 | $('.btn-box .active').removeClass('active'); 702 | switch(choose) { 703 | case "list": // 显示播放列表 704 | if($(".btn[data-action='player']").css('display') !== 'none') { 705 | $("#player").hide(); 706 | } else if ($("#player").css('display') == 'none') { 707 | $("#player").fadeIn(); 708 | } 709 | $("#main-list").fadeIn(); 710 | $("#sheet").fadeOut(); 711 | if(rem.dislist == 1 || rem.dislist == rem.playlist) { // 正在播放 712 | $(".btn[data-action='playing']").addClass('active'); 713 | } else if(rem.dislist == 0) { // 搜索 714 | $(".btn[data-action='search']").addClass('active'); 715 | } 716 | break; 717 | 718 | case "sheet": // 显示专辑 719 | if($(".btn[data-action='player']").css('display') !== 'none') { 720 | $("#player").hide(); 721 | } else if ($("#player").css('display') == 'none') { 722 | $("#player").fadeIn(); 723 | } 724 | $("#sheet").fadeIn(); 725 | $("#main-list").fadeOut(); 726 | $(".btn[data-action='sheet']").addClass('active'); 727 | break; 728 | 729 | case "player": // 显示播放器 730 | $("#player").fadeIn(); 731 | $("#sheet").fadeOut(); 732 | $("#main-list").fadeOut(); 733 | $(".btn[data-action='player']").addClass('active'); 734 | break; 735 | } 736 | } 737 | 738 | // 将当前歌曲加入播放历史 739 | // 参数：要添加的音乐 740 | function addHis(music) { 741 | if(rem.playlist == 2) return true; // 在播放“播放记录”列表则不作改变 742 | 743 | if(musicList[2].item.length > 300) musicList[2].item.length = 299; // 限定播放历史最多是 300 首 744 | 745 | if(music.id !== undefined && music.id !== '') { 746 | // 检查历史数据中是否有这首歌，如果有则提至前面 747 | for(var i=0; i2 && musicList[i].item.length == 0))) { 793 | musicList[i].item = []; 794 | if(musicList[i].id) { // 列表ID已定义 795 | // ajax获取列表信息 796 | ajaxPlayList(musicList[i].id, i); 797 | } else { // 列表 ID 未定义 798 | if(!musicList[i].name) musicList[i].name = '未命名'; 799 | } 800 | } 801 | 802 | // 在前端显示出来 803 | addSheet(i, musicList[i].name, musicList[i].cover); 804 | } 805 | 806 | // 登陆了，但歌单又没有，说明是在刷新歌单 807 | if(playerReaddata('uid') && !tmp_ulist) { 808 | ajaxUserList(rem.uid); 809 | return true; 810 | } 811 | 812 | // 首页显示默认列表 813 | if(mkPlayer.defaultlist >= musicList.length) mkPlayer.defaultlist = 1; // 超出范围，显示正在播放列表 814 | 815 | if(musicList[mkPlayer.defaultlist].isloading !== true) loadList(mkPlayer.defaultlist); 816 | 817 | // 显示最后一项登陆条 818 | sheetBar(); 819 | } 820 | 821 | // 清空用户的同步列表 822 | function clearUserlist() { 823 | if(!rem.uid) return false; 824 | 825 | // 查找用户歌单起点 826 | for(var i=1; i.mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)} --------------------------------------------------------------------------------