文章目录
- 文件分布介绍
- 效果预览
- 代码
- css样式
- Location
- player.css
- js样式
- player.js
文件分布介绍
效果预览
代码
css样式
Location
html {height: 100%;}body {font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;background: #000;color: #CFEBE4;font-size: 18px;line-height: 2;letter-spacing: 1.2px;margin: 0;}a {color: #ebf7f4;}* {margin:0;padding:0;
}#willerce {text-align: center;//max-width: 350px;animation: fade-in;animation-duration: 1s;-webkit-animation: fade-in 1s;margin: 10% auto auto;padding: 0px;//position:absolute;position:fixed;
left:0px;
top:2%;
//display:none;
transform: scale(0,0);
transition-property:width height;
transition-duration:2s;
transition-delay:0.8s;width: 100%;
}.canvas {margin: 0 auto;display: block;
}
img#logo {width: 128px;background-size: cover;border-radius: 200px;box-shadow: 0px 0px 40px rgb(255, 255, 255);border: 3px solid rgba(255, 255, 255, 0.61);opacity: 1;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;transition: all 1.0s;
}
#logo:hover {box-shadow: 0 0 10px #fff;-webkit-box-shadow: 0 0 19px #fff;transform:rotate(360deg);-ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.anniu {color: #3F3F3F99;font-weight: 500;font-size: 20px;background-color: rgba(255, 255, 255, 0.12);padding: 5px 9px;border-radius: 10px;margin-top: 10px;
}
.anniu:hover {color: #FFFFFFE6;background-color: rgba(255, 255, 255, 0.06);transition: all 350ms;
}
a {margin: 0 auto;line-height: 40px;text-align: center;text-decoration: none;
}a:link,
a:visited {
color:#D0CCCC;
text-decoration:none;
}
a:hover,
a:active {
color:#fff;
text-decoration:none;
}.copyright {bottom: 0;cursor: default;height: 6em;left: 0;line-height: 8em;position: absolute;text-align: center;width: 100%;
}
player.css
#QPlayer {position:fixed;overflow:hidden;bottom:62px;left:-250px;transition:transform .5s ease;
}
#QPlayer .left {float:left;margin-top:8px;
}
#QPlayer .right {float:right;margin-top:-17px;
}
#player {float:left;width:250px;height:60px;margin:0 auto;position:relative;background:rgb(255,255,255);box-sizing:border-box;
}
#player .cover {border:0px solid #333;position:absolute;left:0px;overflow:hidden;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-khtml-border-radius:50%;width:60px;height:60px;-moz-box-shadow:0 2px 2px #111;-webkit-box-shadow:0 2px 2px #111;-o-box-shadow:0 2px 2px #111;box-shadow:0 2px 2px rgba(17,17,17,0)
}
#player .cover img {height:100%;border-radius:99%;cursor:pointer;
}
.contr {text-align:center;margin-top:8px;position:relative;
}
#player .ctrl {margin-left:60px;line-height:14px;font-size:14px;margin-top:0px;color:#636363;padding:8px;
}
#player .ctrl .musicTag {cursor: ew-resize;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;
}
#player .ctrl .musicTag strong,#player .ctrl .musicTag span {display:inline;font-size:85%;text-overflow:ellipsis;width:80%;white-space:nowrap;
}
#player .ctrl .musicTag span {font-size:12px;margin-top:5px;color:#757575;
}
#player .ctrl .icon {display:inline-block;opacity:1;cursor:pointer;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;background:url(../image/audio_sprite.png) no-repeat 0 9999px;
}
#player .ctrl .icon:hover,#player .ctrl .icon.enable {opacity:1
}
#player .ctrl .icon:active {opacity:0.3
}
.liebiao {background-image:url(../image/liebiao.png);background-position:-58px -14px !important;width:13px;height:10px;position:absolute;left:229px;top:40px;
}
#player .ctrl .control {margin-top:10px;height:25px
}
.rewind {background-position:-33px 0 !important;width:9px;height:10px;position:absolute;margin-top:4px;left:70px;
}
.playback {background-position:0 0 !important;width:14px;height:18px;
}
.playback.playing {background-position:-36px -63px !important;width:14px;height:18px;position:absolute;left:92px;
}
.fastforward {background-position:-58px 0 !important;width:9px;height:10px;margin-top:4px;position:absolute;left:118px;
}
#player .ctrl .progress {margin-top:12px;
}
#player .ctrl .progress .timer {font-size:12px;color:#5f5f5f;margin:0;vertical-align:middle;line-height:18px;
}
#playlist {float:left;background:rgb(255,255,255);width:250px;margin:0;padding:0;position:relative;max-height: 0;overflow: hidden;
}
#playlist li {color:#989898;font-size:11px;line-height:2;padding:3px 15px;cursor:pointer;text-overflow:ellipsis;list-style-position:inside;cursor:default;
}
#playlist li:hover {color:#716e6e;font-weight:bold;border-left:3px solid #1abc9c;padding:3px 15px 3px 11px;
}
#playlist li.playing {color:#716e6e;font-weight:bold;border-left:3px solid #1abc9c;padding:3px 15px 3px 11px;
}
#pContent {width:270px;box-shadow:blockbox-shadow:1px 0px 5px 2px rgb(36,95,88);
}
#pContent .ssBtn {width:20px;height:60px;background:#1abc9c none repeat scroll 0% 0%;position:relative;right:0px;bottom:0px;box-sizing:border-box;border-left:none;cursor:pointer;display:box-shadow:;float:right;
}
#pContent .ssBtn .adf {float:left;width:20px;height:20px;top:20px;position:relative;background:transparent url("../image/2.png") repeat scroll 0% 0%;
}
#pContent .ssBtn .adf.on {transform:rotate(180deg);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;
}
@-webkit-keyframes rotate {from {-webkit-transform:rotate(0deg)
}
to {-webkit-transform:rotate(360deg)
}
}@-moz-keyframes rotate {from {-moz-transform:rotate(0deg)
}
to {-moz-transform:rotate(360deg)
}
}@-ms-keyframes rotate {from {-ms-transform:rotate(0deg)
}
to {-ms-transform:rotate(360deg)
}
}@-o-keyframes rotate {from {-o-transform:rotate(0deg)
}
to {-o-transform:rotate(360deg)
}
}#QPlayer ::-webkit-scrollbar {width: 3px !important;
}#QPlayer ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;border-radius: 10px !important;
}#QPlayer ::-webkit-scrollbar-thumb {border-radius: 10px !important;background: rgba(0,0,0,0.1) !important;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}
#QPlayer ::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4) !important;
}.marquee {overflow: hidden;
}#player .ctrl .icon,#playlist li,#playlist li:hover:before, #playlist li:hover:after {transition: .2s;-webkit-font-smoothing: antialiased;
}.qplayer-notification {position: fixed;top: 20px;right: 30px;display: inline-block;z-index: 999999;margin: 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;overflow: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000px;-moz-perspective: 1000px;-o-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;padding-bottom: 5px;color: #4F4F4F;font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif;font-size: 14px;line-height: 20px;
}.qplayer-notification-icon {display: block;width: 50px;height: 50px;position: absolute;float: left;text-align: center;vertical-align: bottom;color: white;font-size: 22px;font-weight: bold;background-color: #2980b9;line-height: 48px;
}.qplayer-notification .body {padding-left: 14px;padding-right: 60px;height: 50px;vertical-align: middle;display: table;background-color: white;left: 50px;top: 0;position: relative;
}.qplayer-notification .message {display: table-cell;vertical-align: middle;white-space:nowrap;color: #777;font-size: 15px;font-weight:bold;
}.qplayer-notification .close {position: absolute;top: 0;right: 0;font-size: 19px;line-height: 13px;color: #DDD;padding: 7px;text-decoration: none;display: none;
}.animation-target {-webkit-animation: animation 1000ms linear both;animation: animation 1000ms linear both;
}@-webkit-keyframes animation { 0% { -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }3.4% { -webkit-transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }4.7% { -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }6.81% { -webkit-transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }9.41% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }10.21% { -webkit-transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }13.61% { -webkit-transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }14.11% { -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }17.52% { -webkit-transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }18.72% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }21.32% { -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }24.32% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }25.23% { -webkit-transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }29.03% { -webkit-transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }29.93% { -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }35.54% { -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }36.74% { -webkit-transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }41.04% { -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }44.44% { -webkit-transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }52.15% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }59.86% { -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }63.26% { -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }75.28% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }90.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}@keyframes animation { 0% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }3.4% { transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }4.7% { transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }6.81% { transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }9.41% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }10.21% { transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }13.61% { transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }14.11% { transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }17.52% { transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }18.72% { transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }21.32% { transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }24.32% { transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }25.23% { transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }29.03% { transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }29.93% { transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }35.54% { transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }36.74% { transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }41.04% { transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }44.44% { transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }52.15% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }59.86% { transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }63.26% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }90.69% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}.qplayer_tips{width:210px;height: 0;font-family:none !important;text-align:center;background:#9BCD9B;position:fixed;margin:30px;color: #fff;border-radius: 0.5em;font-size: 18px;font-weight: bold;z-index: 9999999;
}.qplayer_tips .tips_arrow{border-width:0;border-style:solid;border-color:#9BCD9B transparent transparent transparent;position:absolute;bottom:-29px;left:17px;
}.qplayer_tips .tips_button {height: 0;padding: 0;width: 58px;position: absolute;bottom: 7px;right: 7px;border:0;color: #fff;background-color: transparent;border:1px dashed rgba(0,0,0,0.15);border-radius: 5px;cursor: pointer;font-size: 10px;font-family:none !important;
}.qplayer_tips .tips_button:hover {box-shadow: 0 0 10px #fff;
}.qplayer_tips .info{padding: 20px;display: table;
}
js样式
player.js
(function($){// Settingsvar isShowNotification = false,isInitMarquee = true,shuffleArray = [],shuffleIndex,autoClearTimer,autoShowTimer,isFirstPlay = localStorage.qplayer == undefined? true: false,isShuffle = localStorage.qplayer == undefined? false: localStorage.qplayer === 'true'? true: false;// Load playlistfor (var i = 0; i < playlist.length; i++){var item = playlist[i];$('#playlist').append('<li class="lib" style="overflow:hidden;"><strong style="margin-left: 5px;">'+item.title+'</strong><span style="float: right;" class="artist">'+item.artist+'</span></li>');}var currentTrack = 0, audio, timeout;var shuffle_array = localStorage.qplayer_shuffle_array;if (isShuffle && shuffle_array != undefined && playlist.length === (shuffleArray=JSON.parse(shuffle_array)).length) {currentTrack = shuffleArray[0];shuffleIndex = 0;$('#QPlayer .cover').attr('title', '点击关闭随机播放');} else {isShuffle = false;$('#QPlayer .cover').attr('title', '点击开启随机播放');}//判断是否显示滚动条var totalHeight = 0;for (var i = 0; i < playlist.length; i++){totalHeight += ($('#playlist li').eq(i).height() + 6);}if (totalHeight > 360) {$('#playlist').css("overflow", "auto");if (isShuffle) {var temp = 0;for (var j = 0; j < currentTrack; j++) {temp += ($('#playlist li').eq(j).height() + 6);}$('#playlist').scrollTop(temp);}} var play = function(){audio.play();if (isRotate) {$("#player .cover img").css("animation","9.8s linear 0s normal none infinite rotate");$("#player .cover img").css("animation-play-state","running");}$('.playback').addClass('playing');timeout = setInterval(updateProgress, 500);//超过显示栏运行跑马灯if(isExceedTag()) {if (isInitMarquee) {initMarquee();isInitMarquee = false;} else {$('.marquee').marquee('resume');}}}var pause = function(){audio.pause();$("#player .cover img").css("animation-play-state","paused");$('.playback').removeClass('playing');clearInterval(timeout);if(isExceedTag()) {$('.marquee').marquee('pause');}}// Update progressvar setProgress = function(value){var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value%60) : parseInt(value%60),ratio = value / audio.duration * 100;$('.timer').html(parseInt(value/60)+':'+currentSec);}var updateProgress = function(){setProgress(audio.currentTime);}// Switch trackvar switchTrack = function(i){if (i < 0){track = currentTrack = playlist.length - 1;} else if (i >= playlist.length){track = currentTrack = 0;} else {track = i;}isInitMarquee = true;$('audio').remove();loadMusic(track);play();}// Shufflevar shufflePlay = function(i){if (i === 1) {//下一首if (++shuffleIndex === shuffleArray.length) {shuffleIndex = 0;}currentTrack = shuffleArray[shuffleIndex];} else if (i === 0) {//上一首if (--shuffleIndex < 0) {shuffleIndex = shuffleArray.length - 1;}currentTrack = shuffleArray[shuffleIndex];}switchTrack(currentTrack);}// Fire when track endedvar ended = function(){pause();audio.currentTime = 0;if (isShuffle){shufflePlay(1);} else { if (currentTrack < playlist.length) switchTrack(++currentTrack);}}var beforeLoad = function(){var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;}// Fire when track loaded completelyvar afterLoad = function(){if (autoplay == true) play();}// Load trackvar loadMusic = function(i){var item = playlist[i],newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'">').appendTo('#player');$('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');$('.musicTag').html('<strong>'+item.title+'</strong><span> - </span><span class="artist">'+item.artist+'</span>');$('#playlist li').removeClass('playing').eq(i).addClass('playing');audio = newaudio[0];audio.addEventListener('progress', beforeLoad, false);audio.addEventListener('durationchange', beforeLoad, false);audio.addEventListener('canplay', afterLoad, false);audio.addEventListener('ended', ended, false);}loadMusic(currentTrack);$('.playback').on('click', function(){if ($(this).hasClass('playing')){pause();} else {play();}});$('.rewind').on('click', function(){if (isShuffle){shufflePlay(0);} else {switchTrack(--currentTrack);}});$('.fastforward').on('click', function(){if (isShuffle){shufflePlay(1);} else {switchTrack(++currentTrack);}});$('#playlist li').each(function(i){$(this).on('click', function(){switchTrack(i);if (isShuffle) {for (var j = 0; j < shuffleArray.length; j++) {if (shuffleArray[j] === i) {shuffleIndex = j;break;}}} else {currentTrack = i;}});});$('#QPlayer .liebiao,#QPlayer .liebiao').on('click', function(){var pl = $('#playlist');if (pl.hasClass('go') === false) {pl.css({"max-height":"360px","transition":"max-height .5s ease"}); pl.css("border", "1px solid #dedede");pl.addClass('go');} else {pl.css({"max-height":"0px","transition":"max-height .5s ease"});pl.css("border", "0");pl.removeClass('go');}}); $("#QPlayer .ssBtn").on('click', function(){var mA = $("#QPlayer");if ($('.ssBtn .adf').hasClass('on') === false) {if (isFirstPlay) {setTimeout("showTips('#player .cover','点击封面开启(关闭)随机播放', " + function(){setTimeout("showTips('#player .ctrl .musicTag','点击拖动标题栏快进(快退)')", 1000)} + ");", 500);isFirstPlay = !isFirstPlay;localStorage.qplayer = 'false';}mA.css("transform", "translateX(250px)");$('.ssBtn .adf').addClass('on');} else { mA.css("transform", "translateX(0px)");$('.ssBtn .adf').removeClass('on') }}); $("#player .cover").on('click',function(){isShuffle = !isShuffle;if (isShuffle) {$("#player .cover").attr("title","点击关闭随机播放");showNotification('已开启随机播放');var temp = [];for (var i = 0; i < playlist.length; i++) {temp[i] = i;}shuffleArray = shuffle(temp);for (var j = 0; j < shuffleArray.length; j++) {if (shuffleArray[j] === currentTrack) {shuffleIndex = j;break;}}localStorage.qplayer_shuffle_array = JSON.stringify(shuffleArray);} else {$("#player .cover").attr("title","点击开启随机播放");showNotification('已关闭随机播放');localStorage.removeItem('qplayer_shuffle_array');}localStorage.qplayer = isShuffle;});var startX, endX;$('#player .ctrl .musicTag').mousedown(function(event){startX = event.screenX;}).mousemove(function(event){//鼠标左键if (event.which === 1) {endX = event.screenX;var seekRange = Math.round((endX - startX) / 678 * 100);audio.currentTime += seekRange;setProgress(audio.currentTime);}});$('#player .ctrl .musicTag').bind('touchstart', function(event){startX = event.originalEvent.targetTouches[0].screenX;}).bind('touchmove',function(event){endX = event.originalEvent.targetTouches[0].screenX;var seekRange = Math.round((endX - startX) / 678 * 100);audio.currentTime += seekRange;setProgress(audio.currentTime);});})(jQuery);function initMarquee(){$('.marquee').marquee({//speed in milliseconds of the marqueeduration: 15000,//gap in pixels between the tickersgap: 50,//time in milliseconds before the marquee will start animatingdelayBeforeStart: 0,//'left' or 'right'direction: 'left',//true or false - should the marquee be duplicated to show an effect of continues flowduplicated: true});
}//检测标题和作者信息总宽度是否超出播放器，超过则返回true开启跑马灯
function isExceedTag() {var isExceedTag = false;if ($('.musicTag strong').width() + $('.musicTag span').width() + $('.musicTag .artist').width() > $('.musicTag').width()) {isExceedTag = true;}return isExceedTag;
}function shuffle(array) {var m = array.length,t, i;// 如果还剩有元素…while (m) {// 随机选取一个元素…i = Math.floor(Math.random() * m--);// 与当前元素进行交换t = array[m];array[m] = array[i];array[i] = t;}return array;
}function showNotification(info) {isShowNotification = true;//判断通知是否存在，存在就移除if ($('.qplayer-notification').length>0) {$('.qplayer-notification').remove();clearTimeout(autoClearTimer);clearTimeout(autoShowTimer);}$('body').append('<div class="qplayer-notification animation-target"><span class="qplayer-notification-icon">i</span><span class="body" style="box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px;"><span class="message"></span></span><a class="close" href="#" οnclick="closeNotification();return false;">×</a><div style="clear: both"></div>');$('.qplayer-notification .message').text(info);//用width:auto来自动获取通知栏宽度var width = $('.qplayer-notification').css({"opacity":"0", "width":"auto"}).width() + 20;$('.qplayer-notification').css({"width":"50px","opacity":"1"});autoShowTimer = setTimeout(function(){$('.qplayer-notification').css({"width":width,"transition":"all .7s ease"});$('.qplayer-notification .close').delay(500).show(0);},1500);autoClearTimer = setTimeout("if ($('.qplayer-notification').length>0) {closeNotification()}",8000);
}function closeNotification() {isShowNotification = false;$('.qplayer-notification').css({"width":"50px","transition":"all .7s ease"});$('.qplayer-notification .close').delay(500).hide(0);setTimeout(function(){if (!isShowNotification) {$('.qplayer-notification').css("opacity","0");$('.qplayer-notification-icon').css({"transform":"scale(0)","transition":"transform .5s ease"});}},1000);setTimeout(function(){if (!isShowNotification) {$('.qplayer-notification').remove();}},1500);clearTimeout(autoClearTimer);clearTimeout(autoShowTimer);
}/*
*div: 要在其上面显示tip的div
*info: tip内容
*func: 不再提示按钮的click绑定函数
*/
function showTips(div, info, func) {var box_height = 100;$('body').append('<div class="qplayer_tips"><span class="tips_arrow"></span><span class="info" style="display:none">' + info + '</span><button class="tips_button" οnclick="removeTips()">不再提示</button></div>');$('.qplayer_tips').css({"top":$(div).offset().top-box_height-30-15, "left": $(div).offset().left-28});$('.qplayer_tips').css({"height":box_height,"transition":"all .5s ease-in-out"});$('.qplayer_tips .info').delay(500).fadeIn();$('.tips_arrow').css({"border-width":"15px","transition":"all .5s ease-in-out"});$('.tips_button').css({"height":"30px","transition":"all .5s ease-in-out"});if (func != undefined) {$('.tips_button').click(func);}
}function removeTips() {$('.qplayer_tips .info').fadeOut();$('.qplayer_tips').css({"height":"0","transition":"all .5s ease-in-out"});$('.tips_arrow').css({"border-width":"0","transition":"all .5s ease-in-out"});$('.tips_button').css({"opacity":"0","transition":"all .2s ease-in-out"});setTimeout(function(){$('.qplayer_tips').remove()}, 500);
}
