hhCandy 5 years ago
parent f226987bf4
commit 6739edba9d
  1. 508
      css/player.css
  2. 2073
      css/style.css
  3. BIN
      images/109951163112362346.jpg
  4. BIN
      images/1517791716.png
  5. BIN
      images/18619129906152259.jpg
  6. BIN
      images/18808245906449965.jpg
  7. BIN
      images/19124905253592749.jpg
  8. BIN
      images/19127104277052748.jpg
  9. BIN
      images/3283141725800255.jpg
  10. BIN
      images/Deuxième dollars.jpg
  11. BIN
      images/Youka.png
  12. BIN
      images/add_btn1.png
  13. BIN
      images/add_btn2.png
  14. BIN
      images/ariko.png
  15. BIN
      images/bannerBtn.png
  16. BIN
      images/facebook33.png
  17. BIN
      images/fasd.png
  18. BIN
      images/favicon.ico
  19. BIN
      images/flag.jpg
  20. BIN
      images/icon_play.png
  21. BIN
      images/icos.png
  22. BIN
      images/index2.png
  23. BIN
      images/index_title_bg.png
  24. BIN
      images/jisad.png
  25. BIN
      images/ksoa.png
  26. BIN
      images/lise.png
  27. BIN
      images/msoal.png
  28. BIN
      images/mvPlayIcon.png
  29. BIN
      images/netease.png
  30. BIN
      images/new_songs_btn.png
  31. BIN
      images/play_btn1.png
  32. BIN
      images/play_btn2.png
  33. BIN
      images/player.png
  34. BIN
      images/player.seeking.gif
  35. BIN
      images/qqweibo.png
  36. BIN
      images/toTop.png
  37. BIN
      images/twitter.png
  38. BIN
      images/user.png
  39. BIN
      images/user2.png
  40. BIN
      images/youku.png
  41. BIN
      images/优卡音乐3.png
  42. 843
      index.html
  43. 563
      js/index.js
  44. 2
      js/jquery.js
  45. 12
      js/modernizr.js
  46. 3
      js/player.js
  47. 381
      js/player_database.js
  48. 2
      js/playlist.js
  49. BIN
      main_banner/161a3567e85b53621a1074fcb64d62bb.png
  50. BIN
      main_banner/2ad7c5e1ff2e0064a6e785a73c9b7364.png
  51. BIN
      main_banner/6c4c5d3e62274e1fa1a314aa8bede506.png
  52. BIN
      main_banner/873b57828b3a0a67-2a532e4245c541ae-71f399aeb90edf9940ed27bd2accbccb.png
  53. BIN
      main_banner/eebf049cd4bd31196478bdee66acdcdd.png

@ -0,0 +1,508 @@
/*左侧音乐播放器CSS*/
.jp-audio :focus, .jp-audio-stream :focus, .jp-video :focus {
outline: 0
}
.jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner {
border: 0
}
.jp-audio-stream, .jp-video {
/*外框*/
width: 480px;
height: 94px;
position: fixed;
left: -480px;
bottom: 20px;
z-index: 999;
font-size: 16px;
font-family: "微软雅黑";
line-height: 1.6;
color: #fff;
border-radius: 4px;
background: #130519de;
}
.jp-controls-holder {
/*控件区*/
width: 440px;
margin: 0 auto;
clear: both;
overflow: hidden;
position: absolute;
left: 82px;
top: 25px;
}
.jp-controls {
width: 134px;
margin-left: 150px;
}
.jp-controls button {
display: block;
float: left;
border-radius: 50%;
overflow: hidden;
text-indent: -999px;
border: none;
cursor: pointer;
}
/*控件icons*/
.jp-play {
width: 40px;
height: 40px;
background: url(../images/player.png) no-repeat;
}
.jp-play:hover {
background: url(../images/player.png) -41px 0 no-repeat;
}
.jp-state-playing .jp-play {
background: url(../images/player.png) 0 -42px no-repeat;
}
.jp-state-playing .jp-play:hover {
background: url(../images/player.png) -41px -42px no-repeat;
}
.jp-next, .jp-previous, .jp-stop {
width: 28px;
height: 28px;
margin-top: 6px;
}
.jp-stop {
background: url(../images/player.png) 0 -83px no-repeat;
margin-left: 10px;
}
.jp-stop:hover {
background: url(../images/player.png) -29px -83px no-repeat;
}
.jp-previous {
background: url(../images/player.png) 0 -112px no-repeat;
}
.jp-previous:hover {
background: url(../images/player.png) -29px -112px no-repeat;
}
.jp-next {
background: url(../images/player.png) 0 -141px no-repeat;
}
.jp-next:hover {
background: url(../images/player.png) -29px -141px no-repeat;
}
.jp-progress {
overflow: hidden;
background-color: #ddd;
}
.jp-audio .jp-progress {
position: absolute;
top: 32px;
height: 15px;
}
.jp-audio .jp-type-single .jp-progress {
left: 110px;
width: 186px;
}
.jp-audio .jp-type-playlist .jp-progress {
left: 166px;
width: 130px;
}
.jp-video .jp-progress {
top: 0;
left: 0;
width: 100%;
height: 4px;
}
/*进度条*/
.jp-seek-bar {
background: url(../images/player.png) 0 -202px repeat-x;
width: 0;
height: 100%;
cursor: pointer;
}
.jp-play-bar {
background-color: #7E60AD;
width: 0;
height: 100%;
}
.jp-seeking-bg {
background: url(../images/player.seeking.gif);
}
/*音量控制*/
.jp-volume-controls {
width: 100px;
position: absolute;
top: 32px;
left: 260px;
}
.jp-video .jp-volume-controls {
top: 12px;
left: 30px;
}
.jp-volume-controls button {
display: block;
position: absolute;
overflow: hidden;
text-indent: -9999px;
border: none;
cursor: pointer;
}
.jp-mute, .jp-volume-max {
width: 18px;
height: 15px;
}
.jp-volume-max {
left: 74px;
}
.jp-mute {
background: url(../images/player.png) 0 -170px no-repeat;
}
.jp-mute:hover {
background: url(../images/player.png) -19px -170px no-repeat;
}
.jp-state-muted .jp-mute {
background: url(../images/player.png) -60px -170px no-repeat;
}
.jp-state-muted .jp-mute:hover {
background: url(../images/player.png) -79px -170px no-repeat;
}
.jp-volume-max {
background: url(../images/player.png) 0 -186px no-repeat;
}
.jp-volume-max:hover {
background: url(../images/player.png) -19px -186px no-repeat;
}
.jp-volume-bar {
position: absolute;
overflow: hidden;
background-color: #5C4169;
top: 6px;
left: 20px;
width: 50px;
height: 3px;
cursor: pointer;
border-radius: 3px;
}
.jp-volume-bar-value {
background-color: #6646A1;
width: 0;
height: 5px
}
.jp-audio .jp-time-holder {
position: absolute;
top: 50px;
}
.jp-audio .jp-type-single .jp-time-holder {
left: 110px;
width: 186px;
}
.jp-audio .jp-type-playlist .jp-time-holder {
left: 166px;
width: 130px;
}
.jp-current-time, .jp-duration {
width: 60px;
font-size: 10px;
color: #dadada;
}
.jp-current-time {
float: left;
display: inline;
cursor: default;
}
.jp-duration {
float: right;
display: inline;
text-align: right;
cursor: pointer;
}
/*播放时间*/
.jp-video .jp-current-time {
font-size: 10px;
position: absolute;
left: 115px;
top: 70px;
}
.jp-video .jp-duration {
font-size: 10px;
position: absolute;
right: 35px;
top: 70px;
}
.jp-details {
font-weight: 700;
text-align: center;
cursor: default;
}
.jp-details, .jp-playlist {
width: 100%;
background-color: #ccc;
}
.jp-type-playlist .jp-details, .jp-type-single .jp-details {
border-top: none;
}
.jp-details .jp-title {
margin: 0;
padding: 5px 20px;
font-size: .72em;
font-weight: 700;
}
/*播放列表*/
.jp-playlist-box {
width: 100%;
height: 0px;
position: absolute;
left: 0;
top: 94px;
overflow: hidden;
}
.jp-playlist ul {
list-style-type: none;
margin: 0;
padding: 0px;
font-size: 12px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 200px;
position: absolute;
left: 0;
top: 0px;
font-family: "宋体";
}
.jp-playlist li {
height: 27px;
line-height: 27px;
padding: 0 0 0 27px;
list-style-type: decimal;
list-style-position: inside;
}
.jp-playlist li div {
display: inline;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
background: rgba(0, 0, 0, .4);
}
div.jp-type-playlist div.jp-playlist a {
color: #7E60AD;
font-family: "宋体";
text-decoration: none;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current, div.jp-type-playlist div.jp-playlist a:hover, div.jp-type-playlist div.jp-playlist li.jp-playlist-current span.jp-artist, div.jp-type-playlist div.jp-playlist a:hover span {
color: #665975;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
float: right;
display: inline;
text-align: right;
margin-right: 35px;
color: #efefef;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
color: #5C4169;
}
span.jp-artist {
font-size: 12px;
}
/*歌手名*/
/*循环、随机*/
.jp-video .jp-toggles {
width: 100px;
position: absolute;
right: 27px;
margin: 10px 0 0;
}
.jp-toggles button {
display: block;
float: left;
width: 25px;
height: 18px;
text-indent: -9999px;
line-height: 100%;
border: none;
cursor: pointer;
}
.jp-repeat {
background: url(../images/player.png) 0 -290px no-repeat;
}
.jp-repeat:hover {
background: url(../images/player.png) -30px -290px no-repeat;
}
.jp-state-looped .jp-repeat {
background: url(../images/player.png) -60px -290px no-repeat;
}
.jp-state-looped .jp-repeat:hover {
background: url(../images/player.png) -90px -290px no-repeat;
}
.jp-shuffle {
background: url(../images/player.png) 0 -270px no-repeat;
margin-left: 5px;
}
.jp-shuffle:hover {
background: url(../images/player.png) -30px -270px no-repeat;
}
.jp-state-shuffled .jp-shuffle {
background: url(../images/player.png) -60px -270px no-repeat;
}
.jp-state-shuffled .jp-shuffle:hover {
background: url(../images/player.png) -90px -270px no-repeat;
}
/*滚动条*/
html, body, header, nav, footer, div, ul, ol, li, p, form, input, a, span, em, i, strong, b, font, img {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
.jp-video .scrollBar {
width: 4px;
height: 80px;
background: #3A3B3B;
position: absolute;
right: 0;
bottom: 0;
border-radius: 4px;
display: none;
}
.jp-video .scrollBar .bar {
width: 4px;
height: 25px;
background: #6646A1;
position: absolute;
left: 0;
top: 0px;
border-radius: 4px;
cursor: pointer;
}
/*播放器显示 隐藏*/
.jp-video .folded_bt {
width: 20px;
height: 80px;
display: block;
position: absolute;
right: -20px;
top: 5px;
border: none;
background: #111;
cursor: pointer;
padding: 0;
margin: 0;
}
.jp-video .folded_bt span {
width: 20px;
height: 30px;
display: block;
background: url(../images/player.png) no-repeat -90px -6px;
}
.jp-video .folded_bt:hover span {
background-position: -116px -6px;
}
/*列表歌曲 清空*/
#listRemove {
width: 20px;
height: 20px;
display: none;
position: absolute;
right: 5px;
bottom: 2px;
cursor: pointer;
background: url(../images/player.png) no-repeat -93px -53px;
}
#listRemove:hover {
background-position: -119px -53px;
}
/*歌曲列表 显示 隐藏*/
#listClose {
width: 30px;
height: 30px;
cursor: pointer;
position: absolute;
right: 0px;
top: 0;
background: url(../images/player.png) no-repeat -88px -85px;
}
#listClose:hover {
background-position: -115px -85px;
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 632 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 726 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 557 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 638 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 624 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 594 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 599 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,843 @@

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>优卡音乐</title>
<meta name="keywords" content="优卡音乐" />
<meta name="description" content="person music" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/player.css" />
<link rel="Shortcut Icon" href="images/favicon.ico" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script>
if ((!to3d()) || document.documentMode == 10 || document.documentMode == 11){
window.location="error/error.html";
}
</script>
</head>
<body>
<!--头部 开始-->
<div id="header">
<!--顶部bar 开始-->
<div id="headCont">
<audio id="audioPlayer"></audio>
<!--二级导航-->
<nav class="sub_nav">
<div class="nav_list">
<ul>
<li>
<a href="" class="smallogo">
<span class="mini_logo"></span>
</a>
</li>
<li><a href="" class="home"></a></li>
<div class="sub_list" id="sub_list">
<p class="active">
<a href="?cat=9">That music dwells in my mind.</a>
</p>
</div>
</ul>
</div>
</nav>
</div>
<!--头部导航 结束-->
</div>
<!-- 音乐馆 模块 开始 default-->
<section class="section_cont">
<!--轮播图 开始 -->
<div class="main_banner">
<div class="main_banner_bg"></div>
<div class="main_banner_wrap">
<div class="main_banner_box" id="m_box">
<a href="javascript:void(0)" class="banner_btn js_pre">
<span class="banner_btn_arrow"><i></i></span>
</a>
<a href="javascript:void(0)" class="banner_btn btn_next js_next">
<span class="banner_btn_arrow"><i></i></span>
</a>
<ul>
<li id="imgCard0">
<a href=""><span style="opacity:0;"></span></a>
<img src="main_banner/2ad7c5e1ff2e0064a6e785a73c9b7364.png" alt="">
<p style="bottom:0">对不起,你一直在等我,但是我却现在才来.</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/eebf049cd4bd31196478bdee66acdcdd.png" alt="">
<p>樱花满地集于我心 楪舞纷飞祈愿相随.</p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="main_banner/161a3567e85b53621a1074fcb64d62bb.png" alt="">
<p>无意义的理想,迟早会在现实面前崩溃.</p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/873b57828b3a0a67-2a532e4245c541ae-71f399aeb90edf9940ed27bd2accbccb.png" alt="">
<p>什么都无法舍弃的人,什么也改变不了.</p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/6c4c5d3e62274e1fa1a314aa8bede506.png" alt="">
<p>再见了!只要是活着的东西,就算是神都杀给你看……无垢识 开境!死亡啊,别站在我面前!</p>
</li>
</ul>
<!--火狐倒影图层-->
<p id="rflt"></p>
<!--火狐倒影图层-->
</div>
<!--序列号按钮-->
<div class="btn_list">
<span class="cur"></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!--轮播图 结束 -->
<div class="new_mv new_common">
<div class="new_mv_title new_common_title index_mv_title">
<span>Magic box</span>
<a href="?cat=6" class="more"></a>
<ul>
<li><a class="cur" href="javascript:;">dream</a></li>
<li><a href="javascript:;">spirit</a></li>
<li><a href="javascript:;">magic</a></li>
</ul>
</div>
<div class="new_mv_body index_mv_body">
<div class="mvList" id="mv_rank_list" style="display:block;">
<ul class="sb" id="main">
<li>
<a href="javascript:;" class="playIcon" >
<img width="220" height="125" src="http://p1.music.126.net/DpmzdxcucvbDztcuaBbWiQ==/18734578627337366.jpg" class="attachment-220x125 wp-post-image" alt="mv_1x2_10" />
<strong>周兴哲</strong>
<span>
<font>在你耳边说 &#8211; 周兴哲</font>
<font><i></i></font>
<font><i></i>10<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/wME0oX7VY7fEkKvbXgzlrA==/19122706230471650.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>澤野弘之</strong>
<span>
<font>God of ink &#8211; SawanoHiroyuki</font>
<font><i></i></font>
<font><i></i>9<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/OX-yCGzOUHbhqiKK9Xx4Vg==/4442026976217692.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>flowering</strong>
<span>
<font>white silence(album version) &#8211; TK from 凛として時雨</font>
<font><i></i></font>
<font><i></i>3<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/dlC4rAiDvq_uUi2fpnxKMA==/109951162819138078.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>饭碗的彼岸</strong>
<span>
<font>结び -饭碗的彼岸</font>
<font><i></i></font>
<font><i></i>1<em>2 </em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/WStPGvMUlDC89Wus9813zA==/109951163014870789.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>SawanoHiroyuki[nZk]</strong>
<span>
<font>VV - ALK &#8211; SawanoHiroyuki[nZk]</font>
<font><i></i></font>
<font><i></i>0<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/lf9G9OQf_ouA_FuPZjm1HA==/890604418498843.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>梶浦由记</strong>
<span>
<font>M41+42 &#8211; 梶浦由记</font>
<font><i></i></font>
<font><i></i>0<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/2-_sPmCBnN6VfwFmONRy2Q==/46179488378975.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>张芸京</strong>
<span>
<font>偏爱 &#8211; 张芸京</font>
<font><i></i></font>
<font><i></i>10<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/4E5b_0eDTiMCzYKiVSAerw==/19165587184063665.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>周杰伦</strong>
<span>
<font>算什么男人 &#8211; 周杰伦</font>
<font><i></i></font>
<font><i></i>1<em>26</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/YIhF9kpKMx_wBKQFN-DwTw==/81363860472987.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>刘亦菲</strong>
<span>
<font>兰若词 &#8211; 刘亦菲</font>
<font><i></i></font>
<font><i></i>7<em>23</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/fJ4Y4PN_h0Mg3ByQ2yfL9g==/838927371993316.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>miu-clips</strong>
<span>
<font>open &#8211; miu-clips</font>
<font><i></i></font>
<font><i></i>90<em>3</em></font>
</span>
</a>
</li>
</ul>
</div>
<!--2spirit-->
<div class="mvList">
<ul id="spirit">
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/lW4YKD6cMgm32nI66CzWVg==/5702067301704441.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>梶浦由記</strong>
<span>
<font>M19+20 &#8211; 梶浦由記</font>
<font><i></i></font>
<font><i></i>12<em>6</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/tFTRt1H87rReNTyO1K9IDQ==/18498183627713149.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>梶浦由記</strong>
<span>
<font>Sis puella magica! &#8211; 梶浦由記</font>
<font><i></i></font>
<font><i></i>4<em>27</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/7xaV2qB-T1d9m8b1XZC6tQ==/725677674344222.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>梶浦由記</strong>
<span>
<font>月は优しく (月) &#8211; 梶浦由記</font>
<font><i></i></font>
<font><i></i>7<em>22</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/Iqckrd2sOB1ztqrSOw4XzA==/109951162841140691.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>染音若蔡</strong>
<span>
<font>Euterpe エウテルペ &#8211; 染音若蔡</font>
<font><i></i></font>
<font><i></i>4<em>9</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/4xHOkSVWH-n6p5pB3Jf0yQ==/109951162922204274.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>杨秉音</strong>
<span>
<font>幻光&#8211; 杨秉音</font>
<font><i></i></font>
<font><i></i>23<em>1</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/rkJSVKRZkfLXOoVwXtiB4w==/18283778858733705.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>神罗Shinra</strong>
<span>
<font>世界の約束 -神罗Shinra</font>
<font><i></i></font>
<font><i></i>8<em>7</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/HdmtedPRZEEBduHcmUnk3w==/853221023209311.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>久石譲</strong>
<span>
<font>Cave OF Mind &#8211; 久石譲</font>
<font><i></i></font>
<font><i></i>6<em>9</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/GNKtRK8w7edPw3jAsavL2A==/5980243743832365.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>K. Williams</strong>
<span>
<font>幽灵公主 &#8211; K. Williams</font>
<font><i></i></font>
<font><i></i>1<em>9</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/k_WRxDY1qQ4ztB5uFFrvoA==/17907745881679448.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>魏小涵</strong>
<span>
<font>心之逆鳞&#8211; 魏小涵</font>
<font><i></i></font>
<font><i></i>7<em>25</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/-c3qURPNRNLe-YJMbiZoKA==/109951163072509863.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>Qaijff</strong>
<span>
<font>愛を教えてくれた君へ &#8211; Qaijff</font>
<font><i></i></font>
<font><i></i>10<em>2</em></font>
</span>
</a>
</li>
</ul>
</div>
<!--3magic-->
<div class="mvList">
<ul id="magic">
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/r4TK33y6f8cwlntVidXZbQ==/931286348726555.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>川井憲次</strong>
<span>
<font>群雄疾走 &#8211; 川井憲次</font>
<font><i></i></font>
<font><i></i>100<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/ivONokvElv9ZCzyrZp84FQ==/3297435373557125.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>EGOIST</strong>
<span>
<font>Ghost of a smile &#8211; EGOIST</font>
<font><i></i></font>
<font><i></i>54<em>22</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/Q4Dg5QXwft213TBKMv26_A==/3276544653004159.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>大竹佑季</strong>
<span>
<font>樱子小姐的脚下埋着尸体 &#8211; 大竹佑季</font>
<font><i></i></font>
<font><i></i>8<em>26</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/84dpde0vkfsDAVsNNjulXg==/7906588115750467.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>豚乙女</strong>
<span>
<font>非科学的表裏一体 &#8211; 豚乙女</font>
<font><i></i></font>
<font><i></i>10<em>2</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/b04i7LFbHLJkmkzwhwRLMA==/2343059278838229.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>FELT</strong>
<span>
<font>You're the Shine &#8211; FELT</font>
<font><i></i></font>
<font><i></i>9<em>23</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/4BgAnUbCDFex3m4z-hWULA==/2509085534622060.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>清浦夏実</strong>
<span>
<font>旅の途中 &#8211; 清浦夏実</font>
<font><i></i></font>
<font><i></i>90<em>8</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/3eyBH8RjxjXG-EqWShU1wg==/18887410742154555.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>東山奈央</strong>
<span>
<font>夏祭り &#8211;東山奈央</font>
<font><i></i></font>
<font><i></i>5<em>29</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/KmPcFcxxg61d15R8yu5x_A==/18681802069425034.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>Nevve</strong>
<span>
<font>Sway &#8211; Nevve</font>
<font><i></i></font>
<font><i></i>8<em>28</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/xaX_RkkW0cT4f38k62N8yg==/3413983630702236.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong> Breathe Carolina</strong>
<span>
<font>Vanish &#8211; Breathe Carolina</font>
<font><i></i></font>
<font><i></i>0<em>28</em></font>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="playIcon">
<img width="220" height="125" src="http://p1.music.126.net/foJM2P9nq8pXHnCZjcf75w==/19047939439716625.jpg" class="attachment-220x125 wp-post-image" alt="" />
<strong>MEIDEN</strong>
<span>
<font>It's Over &#8211; MEIDEN</font>
<font><i></i></font>
<font><i></i>20<em>8</em></font>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="songs_rcmd_title">
<div class="rcmd_left_title rcmd_title">
<span>Elegant</span>
<a href="" class="more">/more</a>
</div>
<div class="rcmd_center_title rcmd_title">
<span>Ethereal</span>
<a href="" class="more">/more</a>
</div>
<div class="rcmd_right_title rcmd_title">
<span>Silence</span>
<a href="" class="more">/more</a>
</div>
</div>
<div class="songs_rcmd" id="songs_rcmd">
<div class="songs_rcmd_cont">
<ul class="rcmd_left rcmd_cont" id="latest">
<li>
<a href="" class="musicName"> Fleur de lis &#8211; Noicybino</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Dance, cherry blossoms! &#8211; Yuri akiyama</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Lost in Love &#8211; Bois LanYun</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">远すぎた空 &#8211; Akito</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Whether &#8211; AniFace</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Constellation Of Tatyana &#8211; Yakuro</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Princess &#8211; α·Pav</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Day by Day &#8211; Shirfine</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">blue blossoms &#8211; 久遠</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
<ul class="rcmd_center rcmd_cont" id="popular">
<li>
<a href="javascript:;" class="musicName">無神論者のためのセレナータ &#8211; love solfege</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Proschenie &#8211; love solfege</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">神の光 -Μοιρα- &#8211; Sound Horizon</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">星女神の巫女 -Αρτεμισια- &#8211; Sound Horizon</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">石畳の緋い悪魔 &#8211; Sound Horizon</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">この狭い鳥籠の中で &#8211; Sound Horizon</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Secret Track &#8211; Sound Horizon</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">a fairy tale &#8211; MUSIRISCA</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Prayer &#8211; MUSIRISCA</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
<ul class="rcmd_right rcmd_cont" id="rank">
<li>
<a href="javascript:;" class="musicName">创奏&#8211; 霜月はるか</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">願い枯れゆく歌声 &#8211; Ether</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">LICHT MEER &#8211; 河合夕子</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Nocturne No. 2 &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">夜曲 &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">降E大调夜曲 &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">即兴幻想曲 &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Nocturne op. 32 &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="javascript:;" class="musicName">Prelude in Des &#8211; Chopin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
</div>
</div>
<div class="omnibus hot_singer">
<div class="omnibus_cont new_common">
<div class="omnibus_title new_common_title">
<span>A fantasy world</span>
<a href="" class="more"></a>
</div>
<ul id="omnibus_list">
<li class="post_big">
<a href="javascript:;">
<img src="images/ksoa.png" alt="" width="305" height="290">
<i></i>
</a>
<a href="javascript:;">The divine comedy as first love</a>
</li>
<li class="post_small">
<a href="">
<img src="images/Deuxième dollars.jpg" alt="" width="130" height="130">
<span></span>
</a>
<a href="javascript:;">A new world</a>
</li>
<li class="post_small">
<a href="">
<img src='images/fasd.png' alt="" width="130" height="130">
<span></span>
</a>
<a href="">This is our dream</a>
</li>
<li class="post_small">
<a href="">
<img src="images/ariko.png" alt="" width="130" height="130">
<span></span>
</a>
<a href="">what feels most natural</a>
</li>
<li class="post_small">
<a href="">
<img src='images/msoal.png' alt="" width="130" height="130">
<span></span>
</a>
<a href="">I can appreciate that</a>
</li>
<li class="post_small">
<a href="">
<img src='images/lise.png' alt="" width="130" height="130">
<span></span>
</a>
<a href="">Tell myths about love</a>
</li>
<li class="post_small">
<a href="">
<img src="images/jisad.png" alt="" width="130" height="130">
<span></span>
</a>
<a href="">In a different world</a>
</li>
</ul>
</div>
<div class="hot_singer_cont new_common">
<div class="hot_singer_title new_common_title">
<span>Artist's soul</span>
<a href="" class="more"></a>
</div>
<ul class="singer_list">
<li>
<a href="" class="singerPhoto">
<img src=" images/18808245906449965.jpg" alt="" width="70" height="70"></a>
<a href="" class="singer">梶浦由记</a>
</li>
<li>
<a href="" class="singerPhoto">
<img src="images/18619129906152259.jpg" alt="" width="70" height="70"></a>
<a href="" class="singer">花たん</a>
</li>
<li>
<a href="" class="singerPhoto">
<img src=" images/19127104277052748.jpg" alt="" width="70" height="70"></a>
<a href="?p=363" class="singer">泽野弘之</a>
</li>
<li>
<a href="" class="singerPhoto">
<img src=" images/19124905253592749.jpg" alt="" width="70" height="70"></a>
<a href="" class="singer">Sound Horizon</a>
</li>
<li>
<a href="" class="singerPhoto">
<img src='images/109951163112362346.jpg' alt="" width="70" height="70"></a>
<a href="" class="singer">Aimer</a>
</li>
<li>
<a href="" class="singerPhoto">
<img src=" images/3283141725800255.jpg" alt="" width="70" height="70"></a>
<a href="" class="singer">れをる</a>
</li>
<div style="clear:both;"></div>
</ul>
</div>
<div style="clear:both"></div></div>
</section>
<!-- 左侧播放器 开始-->
<div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div id="jquery_jplayer_N"class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"></div>
<div class="jp-duration" role="timer" aria-label="duration"></div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0">上一曲</button>
<button class="jp-play" role="button" tabindex="0">播放</button>
<button class="jp-next" role="button" tabindex="0">下一曲</button>
<button class="jp-stop" role="button" tabindex="0">暂停</button>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">静音</button>
<button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">重复</button>
<button class="jp-shuffle" role="button" tabindex="0">随机</button>
<!--<button class="jp-full-screen" role="button" tabindex="0">全屏</button>-->
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title"></div>
</div>
</div>
</div>
<div class="jp-playlist">
<div class="jp-playlist-box">
<ul>
<!-- 该方法使用无序列表displayplaylist()播放列表 -->
<li></li>
</ul>
</div>
</div>
<div class="jp-no-solution">
<span>升级需要</span>
您浏览器赞不支持播放,请更新版本
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
</div>
</div>
<!--歌曲列表滚动条-->
<div class="scrollBar">
<div class="bar"></div>
</div>
<!--播放器展开隐藏按钮-->
<button type="button" class="folded_bt" title="点击收缩" id="btnfold">
<span></span>
</button>
<div id="listRemove"></div><!--移除全部歌曲按钮-->
<div id="listClose"></div><!--歌曲列表展开收缩按钮-->
</div>
<!-- 左侧播放器 结束-->
<!--底部 开始 -->
<div class="footer" id="footer">
<div class="footer_cont">
<div class="footer_cont_left">
<p>
<a href="">About me</a>|<a href="">History</a>|<a href="">Cartoon</a>|
<a href="">Ad service</a>|<a href="">Movie link</a>|<a href="">Help</a>
</p>
<p>
Copyright © Youka All Rights Reserved
</p>
</div>
<div class="footer_cont_right">
<span>Other Links</span>
<ul>
<li><a href=""><span></span></a></li>
<li><a href=""><span></span></a></li>
<li>
<a href="" class="twoCode">
<span></span>
<img class="tCode" src=" images/1517791716.png" width="100" height="100" alt="二维码" />
</a>
</li>
<li><a href=""><span></span></a></li>
<li><a href=""><span></span></a></li>
</ul>
</div>
<div id="toTop"></div>
</div>
</div>
<!--底部 结束 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--播放器js-->
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/playlist.js"></script>
<script type="text/javascript" src="js/player_database.js"></script>
<!--播放器js-->
<!-- 底部模板调用 结束 -->
</body>
</html>

@ -0,0 +1,563 @@
// index.js
$(function(){
//一、user_login_box(用户登陆)------------------------------------------------------------------
$(document).click(function(){ //页面点击 隐藏
$(".user_login_box").hide();
$(".user_login").removeClass("btn_active");
})
$(".user_login,.user_login_box").click(function(event){
event.stopPropagation(); //阻止默认事件
})
$(".user_login").each(function(){
$(this).click(function(){
$(this).toggleClass("btn_active");
$(this).next().toggle(); //显示和隐藏 切换
$(this).parent().siblings().find(".user_login_box").hide();
})
})
//主菜单--------------------------------------------------------------------------------------
var index_1=0; //鼠标移入的序列号
//鼠标移入主菜单----------------------------------------------
$("ul.navigation li a").hover(function(){
$("ul.navigation li a").removeClass("on");
$(this).addClass("on");
audioPlayer();
},function(){
$("#audioPlayer")[0].pause();
});
$("ul.navigation li a").hover(function(){ //鼠标移入
index_1=$(this).parent().index();
$(".sub_nav ul .sub_list p").eq(index_1).stop(true,true).show(600).siblings().hide();
audioPlayer();
},function(){
$("#audioPlayer")[0].pause();
});
//hover音效
function audioPlayer(){
$("#audioPlayer").attr({"src":"/wp-content/uploads/2015/01/3.mp3"});
$("#audioPlayer")[0].play();
$("#audioPlayer")[0].volume="0.5";
};
//主菜单解决bug-------------------------------------------
//解决 非火狐、非谷歌的兼容性 判断浏览器类型及版本号
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
//判断是webkit且版本小于35.0的(360-7.1) 或者 是IE浏览器
if(($.browser.webkit&&parseFloat($.browser.version)<35)||$.browser.msie){
$("#main_nav li a").css({"transition":"none",background:"none","transform":"rotateX(0deg)"});
$("#main_nav li a").find("span:last-child").css({display:"none"});
$("#main_nav li a").click(function(){
$(this).css({background:"none","transform":"rotateX(0deg)"});
});
$("#main_nav li a").mouseover(function(){
$(this).css({background:"none","transform":"rotateX(0deg)"});
});
}//主菜单解决bug-------------------------------------------
//三、二级菜单,当滚动条滚到一定距离,让它相对浏览器定位(fixed)---------------------------------
if($(".sub_nav").length>0){ //获取二级菜单到顶部的距离
var navTop = $(".sub_nav").offset().top - $('.sub_nav').height()/5;
$(window).scroll(function(){
if ($(window).scrollTop() >= navTop) {
$(".sub_nav").addClass("fixed");
$(".sub_nav ul li a.smallogo").css({opacity:1});
/*$(".main_banner").css({background:"#112233"});#d1d6da*/ //轮播图背景
} else {
$(".sub_nav").removeClass("fixed");
$(".sub_nav ul li a.smallogo").css({opacity:0});
/*$(".main_banner").css({background:""});*/
}
});
}
//五、轮播图-------------------------------------------------------------------------------------
var len=$(".main_banner li").length;
var index_2=0;
var timer=800;
var intervaltimer=0;
var isMoving=false;
function slide(slideMode){//轮播方法
if (isMoving==false){
isMoving=true;
var prev; var next; var hidden;
var curr=$("#imgCard"+index_2);//当前正中显示
if(index_2==0){ //当前正中显示的是第0张时 prev为最后一张
prev=$("#imgCard"+(len-1));
}else{ //否则 序列号-1
prev=$("#imgCard"+(index_2-1));
}
if(index_2==(len-1)){ //当前正中显示的是最后一张时 next为第0张
next=$("#imgCard0");
}else{ //否则 序列号+1
next=$("#imgCard"+(index_2+1));
}
if(slideMode){ //slideMode为1(true),执行slide(1),上一张
if(index_2-2>=0){ //index_2 2 3 4
hidden=$("#imgCard"+(index_2-2));// 0 1 2
}else{ //index_2 0 1
hidden=$("#imgCard"+(len+index_2-2));// 3 4
}
prev.css("z-index","5"); //点击prev按钮 让prev位置上的这张图片 层级最高 显示
next.css("z-index","1");
curr.css("z-index","2");
hidden.css("z-index","1");
//当index_2自减,各图片往右运动效果
hidden.css({width:"450px",height:"180px",top:"60px","left":"0px","opacity":0});
hidden.stop(true,true).animate({width:"580px",height:"240px",top:"20px",left:"0px",opacity:1},timer);
curr.stop(true,true).animate({width:"580px",height:"240px",top:"20px",left:"600px",opacity:1},timer);
next.stop(true,true).animate({width:"450px",height:"180px",top:"60px","left":"730px","opacity":0},timer,function(){next.find("span").css("opacity",0); isMoving = false;});
//prev --> curr prev中的图片li轮换到curr的位置 其他一次轮换
prev.find("span").css("opacity",0);
$(".main_banner_box li").find("p").css({"bottom":"-50px"});//所有标题隐藏
prev.stop(true,true).animate({width:"670px",height:"280px",left:"255px",top:0,opacity:1},timer,function(){
$(this).find("p").animate({"bottom":"0px"}); //当前这张图片的标题运动出来
});
index_2--;
}else{ //执行next 操作
if(index_2+2>=len){ //index_2 3 4
hidden=$("#imgCard"+(index_2+2-len));// 0 1
}else{ //index_2 0 1 2
hidden=$("#imgCard"+(index_2+2));// 2 3 4
}
prev.css("z-index","1");
next.css("z-index","5"); //点击next按钮 让next位置上的这张图片 层级最高 显示
curr.css("z-index","2");
hidden.css("z-index","1");
//当index_2自增,各图片往左运动效果
hidden.css({width:"450px",height:"180px",top:"60px","left":"730px","opacity":0});
hidden.stop(true,true).animate({width:"580px",height:"240px",top:"20px",left:"600px",opacity:1},timer);
curr.stop(true,true).animate({width:"580px",height:"240px",top:"20px",left:"0px",opacity:1},timer);
//next --> curr next中的图片li轮换到curr的位置 其他一次轮换
next.find("span").css("opacity",0);
$(".main_banner_box li").find("p").css({"bottom":"-50px"});//所有标题隐藏
next.stop(true,true).animate({width:"670px",height:"280px",left:"255px",top:0,opacity:1},timer,function(){
$(this).find("p").animate({"bottom":"0px"}); //当前这张图片的标题运动出来
});
prev.stop(true,true).animate({width:"450px",height:"180px",left:"0px",top:"60px",opacity:0},timer,function(){
isMoving = false;
});
index_2++;
}//if else
hidden.find("span").css("opacity",0.5);
curr.find("span").css("opacity",0.5);
if(index_2==len) index_2=0;
if(index_2<0) index_2=len+index_2; //限制index_2的范围
$(".btn_list span").removeClass('curr').eq(index_2).addClass('curr');//给序列号按钮添加、移除样式
}
}//slide()
if(len>3){
//序列号按钮 跳序切换 方法
$(".btn_list span").click(function(event){
if (isMoving ) return;
var oIndex=$(this).index();
if(oIndex==index_2) return;//点击按钮的序列号与当前图片的序列号一致,return
clearInterval(intervaltimer)
intervaltimer=null;
var flag=false;
//当前显示图片的序列号 和 被点击按钮的序列号 间隔超过1且不是首尾两个的时候
if(Math.abs(index_2-oIndex)>1&&Math.abs(len-Math.abs(index_2-oIndex))!=1){
//统一样式
$(".main_banner_box li").css({width:"300px",height:"120px",left:"600px",top:"60px",opacity:0});
//如果当前的序列号 比 被点击按钮序列号 大 而且 不相邻、不是首尾
if(index_2>oIndex&&len-Math.abs(index_2-oIndex)!=1){
flag=true;
index_2=oIndex+1; //oIndex+1 通过slide() 运动回上一张 oIndex
}else{//比 小 而且 不相邻、不是首尾
index_2=oIndex-1; //oIndex-1 通过slide() 运动到下一张 oIndex
if(index_2<0) index_2=len-1;
}
}else{//当前 比 被点击 大 且 相邻 //从0 跳到 4 要执行上一张方法
if((index_2>oIndex&&len-(index_2-oIndex)!=1)||(index_2<oIndex&&len+(index_2-oIndex)==1)){
flag=true; //执行上一张
}
}
slide(flag);
intervaltimer=setInterval(slide,3000);//自动轮播
});
$(".main_banner_box li").on("mousemove",function(){
if($(this).css("width")=="670px"){//鼠标移入为当前正中显示的图片li,则清除定时器
clearInterval(intervaltimer);
intervaltimer=null;
}
}).on("mouseout",function(){//鼠标移除重新滚动
clearInterval(intervaltimer);
intervaltimer=null;
intervaltimer=setInterval(slide,3000);
});
$(".js_pre").click(function(event){//上一张
if (isMoving ) return;
clearInterval(intervaltimer);
intervaltimer=null;
slide(1);
intervaltimer=setInterval(slide,3000);
});
$(".js_next").click(function(event){//下一张
if (isMoving ) return;
clearInterval(intervaltimer);
intervaltimer=null;
slide();
intervaltimer=setInterval(slide,3000);
});
intervaltimer=setInterval(slide,3000);
}else{
$(".js_pre").hide();
$(".js_next").hide();
}//if else
//七、MV首播-----------------------------------------------------------------------------------
var index_3=0; //MV首播按钮序列号
var index_33=0; //首发MV按钮序列号(MV页面)
var index_333=0; //热门MV按钮序列号(MV页面)
var cont_1=$(".index_mv_body .mvList");
var cont_2=$(".shoufa_mv_body .mvList");
var cont_3=$(".hot_mv_body .mvList");
//MV首播 (首页)-------------------------------------
$(".index_mv_title ul li").click(function(){ //选项卡
index_3=$(this).index();
mvSlide($(this),index_3,cont_1);
});
//首发MV (MV页面)--------------------------------
$(".shoufa_mv_title ul li").click(function(){ //选项卡
index_33=$(this).index();
mvSlide($(this),index_33,cont_2);
});
//热门MV(MV页面)------------------------------------
$(".hot_mv_title ul li").click(function(){ //选项卡
index_333=$(this).index();
mvSlide($(this),index_333,cont_3);
});
//封装MV列表切换效果,共用
function mvSlide(btn,n,cont){
btn.find("a").addClass("cur").parent().siblings().find("a").removeClass("cur");
cont.eq(n).fadeIn().siblings("div").fadeOut();
cont.eq(n).addClass("curShow").siblings().removeClass("curShow");
}
var iHtml = "<b></b>";
$(".index_mv_body .mvList ul.sb li").eq(0).append(iHtml);
$(".index_mv_body .mvList ul.sb li").eq(1).append(iHtml);
$(".shoufa_mv_body .mvList ul.sb li").eq(0).append(iHtml);
$(".shoufa_mv_body .mvList ul.sb li").eq(1).append(iHtml);
//排行榜-----------------
// $("#rank li").eq(0).find("a.musicName").prepend("<i class='first_place'>1</i>");
// $("#rank li").eq(1).find("a.musicName").prepend("<i class='second_place'>2</i>");
// $("#rank li").eq(2).find("a.musicName").prepend("<i class='third_place'>3</i>");
for(var r=0;r<9;r++){
$("#rank li").eq(r).find("a.musicName").prepend(" " + (r + 1) + "  ");
}
for(var k=0;k<9;k++){
$("#latest li").eq(k).find("a.musicName").prepend(" " + (k + 1) + "  ");
}
for (var p=0;p<9;p++){
$("#popular li").eq(p).find("a.musicName").prepend(" " + (p + 1) + "  ");
}
//九、精选集-------------------------------------------------------------------------------
var oList_omnibus=document.getElementById("omnibus_list");
var oI=oList_omnibus.getElementsByTagName("i")[0];
var aSpan=oList_omnibus.getElementsByTagName("span");
$("#omnibus_list .post_big a").hover(function(){
$(this).find("i").stop(true,true).animate({left:"0px"},300);
},function(){
$(this).find("i").stop(true,true).animate({left:"305px"},300,function(){
oI.style.left="-305px";
});
});
$("#omnibus_list .post_small a").hover(function(){
$(this).find("span").stop(true,true).animate({left:"0px"},300);
},function(){
$(this).find("span").stop(true,true).animate({left:"130px"},300,function(){
for(var i=0; i<aSpan.length; i++){
aSpan[i].style.left="-130px";
}
});
});
});//$(function(){}); window.onload
//十、回到顶部---------------------------------------------------------------------------
$("#toTop").click(function(){
$("html,body").animate({scrollTop: "0px"},"slow");
//点击音效
$("#audioPlayer").attr({"src":"/wp-content/uploads/2015/01/1.mp3"});
$("#audioPlayer")[0].play();
});
//二维码
$(".footer_cont_right a.twoCode").hover(function(){
$(this).find("img.tCode").stop(true, true).fadeIn();
},function(){
$(this).find("img.tCode").stop(true, true).delay(800).fadeOut();
});
// mv页.js
//十一、MV页面 js-------------------------------------------------------------------------
// $("#mv_rank_list ul li").hover(function(){
// $(this).css({"z-index":"6"}).stop(true,true).animate({"left":"-10px","opacity":"1"},350).siblings().css({"z-index":"1"}).stop(true,true).animate({"left":"0px","opacity":"0.5"},350);
// },function(){
// $("#mv_rank_list ul li").css({"z-index":"1"}).stop(true,true).animate({"left":"0px","opacity":"1"},350);
// });
$("#mv_classify_list ul li").hover(function(){
$(this).stop(true,true).animate({"opacity":"1"},350).siblings().stop(true,true).animate({"opacity":"0.5"},350);
},function(){
$("#mv_classify_list ul li").stop(true,true).animate({"opacity":"1"},350);
});
$("#mvList .mv_rcmd").click(function(){
var index_mv_rcmd1=$(this).index();
$(this).find("span").addClass("active").parent().siblings("li").find("span").removeClass("active");
$(this).find("i").addClass("on").parent().siblings("li").find("i").removeClass("on");
});
//十二、MV视频播放器---------------------------------------------------------------------------------------------------
//数组 保存 MV.url
var arrSongs = ["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"]
//爱情大师 - 崔子格 匆匆那年 - 王菲 喜欢你 - 邓紫棋
$("#mvList li.mv_rcmd").click(function(){
var _index_songs=$(this).index();
video[0].src=arrSongs[_index_songs];
video[0].play();
$(".playPause").css({"backgroundPosition":"-54px -10px"});
});
$("#mv_rank_list ul li").click(function(){
var index_mv_rcmd2=$(this).index();
video[0].src=arrSongs[index_mv_rcmd2];
video[0].play();
$(".playPause").css({"backgroundPosition":"-54px -10px"});
});
//MV视频播放器
var video=$("#video");
//video[0].volume="0.5";
//播放暂停
$(".playPause").click(function(){
if(video[0].paused){ //video 要带上 [0]
video[0].play();
$(this).css({"backgroundPosition":"-54px -10px"});
}else{
video[0].pause();
$(this).css({"backgroundPosition":"-12px -10px"});
}
return false;
});
//获取总时长 与 获取当前播放时间
video.on("loadedmetadata",function(){
var dur=changeTime(video[0].duration);
$(".duration").text(dur);
});
video.on("timeupdate",function(){
var cur=changeTime(video[0].currentTime);
$(".current").text(cur);
var cur_pos=video[0].currentTime; //当前播放时间
var dur_max=video[0].duration; //总时长,两者相除 求比例
var scale=100*cur_pos/dur_max;
$(".timeBar").css("width",scale+"%");
});
//把获取的时间(单位为毫秒) 转化成秒 方法
function changeTime(time){
iNum=parseInt(time);
var iM=toZero(Math.floor(time/60));
var iS=toZero(Math.floor(time%60));
return iM+":"+iS;
}
//补零
function toZero(num){
return num<=9?"0"+num:""+num;
}
//点击或拖动进度条
var timeDrag=false; /* 拖动状态 */
$(".progressBar").mousedown(function(e){
timeDrag=true;
updatebar(e.pageX);
});
$(document).mouseup(function(e){
if(timeDrag){
timeDrag=false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e){
if(timeDrag){
updatebar(e.pageX);
}
});
//进度条 操作
var updatebar=function(x){
var progress=$(".progressBar");
var maxduration=video[0].duration; //总时间
var position=x-progress.offset().left; //点击或拖动的位置
var percentage=100*position/progress.width();
//限制拖动范围
if(percentage>100){
percentage=100;
}
if(percentage<0){
percentage=0;
}
//拖动滚动条 currenttime 相应变化
$(".timeBar").css("width",percentage+"%");
video[0].currentTime=maxduration*percentage/100;
};
//缓冲加载条
var startBuffer=function(){
var maxduration=video[0].duration;
var currentBuffer=video[0].buffered.end(0);
var percentage=100*currentBuffer/maxduration;
$(".bufferBar").css("width",percentage+"%");
if(currentBuffer<maxduration){
setTimeout(startBuffer,500);
}
};
setTimeout(startBuffer,500);
//静音按钮
$(".muted").click(function(){
if(video[0].muted){
$(this).css({"backgroundPosition":"-88px -10px"});
video[0].muted=false;
}else{
$(this).css({"backgroundPosition":"-126px -10px"});
video[0].muted=true;
}
return false;
});
//音量条 点击或拖动
var timeDrag2=false; /* 拖动状态 */
$(".volumeBar").mousedown(function(e){
timeDrag2=true;
updatebar2(e.pageX);
});
$(document).mouseup(function(e){
if(timeDrag2){
timeDrag2=false;
updatebar2(e.pageX);
}
});
$(document).mousemove(function(e){
if(timeDrag2){
updatebar2(e.pageX);
}
});
//音量条 操作
var updatebar2=function(x){
var progress=$(".volumeBar");
var maxduration=video[0].duration; //总时间
var position=x-progress.offset().left; //点击或拖动的位置
var percentage=100*position/progress.width();
//限制范围
if(percentage>100){
percentage=100;
}
if(percentage<0){
percentage=0;
}
//拖动滚动条 currenttime 相应变化
$(".volume").css("width",percentage+"%");
video[0].volume=percentage/100;
};
//全屏
$(".fullscreen").on("click",function(){
//兼容写法
video[0].RequestFullScreen=video[0].RequestFullScreen||video[0].webkitRequestFullScreen||video[0].mozRequestFullScreen;
//调用全屏方法
video[0].RequestFullScreen();
return false;
});

2
js/jquery.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,381 @@
// MP3播放器及歌曲库js
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{ title: "Ellens Gesang III D839", artist: "Geoffrey Parsons", mp3:"http://music.163.com/song/media/outer/url?id=16691428.mp3 ", poster: "http://p1.music.126.net/wAIlwR4SxuZg_ZMwgmSYcg==/3386495814257726.jpg?param=130y130"},
{ title: "默", artist: "那英", mp3:"http://music.163.com/song/media/outer/url?id=31473269.mp3 ", poster: "http://p1.music.126.net/OCGt5ln0lPPtPbVJ3VEKtA==/109951163020570422.jpg?param=130y130"},
{ title: "Fire", artist: "Said The Sky", mp3:"http://music.163.com/song/media/outer/url?id=435289279.mp3", poster: "http://p1.music.126.net/tg2zke_mrqwuOPlEIEUjGg==/18294773975127592.jpg?param=130y130"}
],
{playlistOptions:{enableRemoveControls: true},
swfPath: "js/",
supplied: "webmv, ogv, m4v, oga, mp3",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true
});
//past
var latest=[
{ title: "Fleur de lis", artist: "Noicybino", mp3: "http://music.163.com/song/media/outer/url?id=533079474.mp3", poster:"http://p1.music.126.net/C3C4vPOMsTd_vX9Ccww06Q==/109951163117390906.jpg?param=130y130"},
{ title: "Dance, cherry blossoms!", artist: "Yuri akiyama", mp3: "http://music.163.com/song/media/outer/url?id=518291899.mp3 ", poster:"http://p1.music.126.net/AKhQSRL6HyZu4YwWg4Wi6A==/109951163060585255.jpg?param=130y130"},
{ title: "Lost in Love", artist: "Bois LanYun", mp3: "http://music.163.com/song/media/outer/url?id=521597063.mp3", poster:"http://p1.music.126.net/6o_M9dSbYPRqKRmwY1bOGg==/109951163073262137.jpg?param=130y130"},
{ title: "远すぎた空", artist: "Akito", mp3: "http://music.163.com/song/media/outer/url?id=357185.mp3", poster:"http://p1.music.126.net/7cYhniBuLvU3fvLjeRFeNw==/106652627910735.jpg?param=130y130"},
{ title: "Whether", artist: " AniFace", mp3: "http://music.163.com/song/media/outer/url?id=515384791.mp3", poster:"http://p1.music.126.net/PzE3JrY7QVqFghK9gJN67A==/109951163050326398.jpg?param=130y130"},
{ title: "Constellation Of Tatyana", artist: "Yakuro", mp3: "http://music.163.com/song/media/outer/url?id=28914253.mp3", poster:"http://p1.music.126.net/V7YrIWl2ALgg4QZTxD7_rw==/2937895071851575.jpg?param=130y130"},
{ title: "Princess", artist: "α·Pav", mp3: "http://music.163.com/song/media/outer/url?id=357023.mp3", poster:"http://p1.music.126.net/ktIGtL8eCh6bmDf5a27tFQ==/93458488378205.jpg?param=130y130"},
{ title: "Day by Day", artist: "Shirfine", mp3: "http://music.163.com/song/media/outer/url?id=27579054.mp3", poster:"http://p1.music.126.net/J6m3eJOw32G_wDim2tqloA==/5636096604060170.jpg?param=130y130"},
{ title: "blue blossoms", artist: "久遠", mp3: "http://music.163.com/song/media/outer/url?id=803347.mp3", poster:"http://p1.music.126.net/j9u_wRtJMhlt64k-ZSUM3Q==/944480488305733.jpg?param=130y130"}
];
//now
var popular=[
{ title: "無神論者のためのセレナータ", artist: "love solfege", mp3: "http://music.163.com/song/media/outer/url?id=22676238.mp3", poster:"http://p1.music.126.net/ek5C5HeDHICGjziHhTMCow==/749866930165203.jpg?param=130y130"},
{ title: "Proschenie", artist: "love solfege", mp3: "http://music.163.com/song/media/outer/url?id=22676239.mp3", poster:"http://p1.music.126.net/ek5C5HeDHICGjziHhTMCow==/749866930165203.jpg?param=130y130"},
{ title: "神の光 -Μοιρα-", artist: "Sound Horizon", mp3: "http://music.163.com/song/media/outer/url?id=22782003.mp3", poster:"http://p1.music.126.net/ykne_IJENLMk5KvNUXC3Xg==/779553744115520.jpg?param=130y130"},
{ title: "星女神の巫女 -Αρτεμισια-", artist: "Sound Horizon", mp3: "http://music.163.com/song/media/outer/url?id=816209.mp3", poster: "http://p1.music.126.net/jRkMO3QROnFeVrL2m3XuvQ==/18976471183854535.jpg?param=130y130"},
{ title: "石畳の緋い悪魔", artist: "Sound Horizon", mp3: "http://music.163.com/song/media/outer/url?id=816217.mp3", poster:"http://p1.music.126.net/e0tsg402IoJLHyJIx4TWQw==/4451922580867675.jpg?param=130y130"},
{ title: "この狭い鳥籠の中で", artist: "Sound Horizon", mp3: "http://music.163.com/song/media/outer/url?id=816197.mp3", poster:"http://p1.music.126.net/RNabeevAh1X4_U76fS1FCg==/4415638697151069.jpg?param=130y130"},
{ title: "Secret Track", artist: "Sound Horizon", mp3: "http://music.163.com/song/media/outer/url?id=470573387.mp3", poster:"http://p1.music.126.net/RNabeevAh1X4_U76fS1FCg==/4415638697151069.jpg?param=130y130"},
{ title: "a fairy tale", artist: "MUSIRISCA", mp3: "http://music.163.com/song/media/outer/url?id=4922555.mp3", poster:"http://p1.music.126.net/9vinX4XYfdNgSu3pQcWMMg==/2542070884388514.jpg?param=130y130"},
{ title: "Prayer", artist: "MUSIRISCA", mp3: "http://music.163.com/song/media/outer/url?id=35504074.mp3", poster:"http://p1.music.126.net/g9dAq3k_Z9gE6GRcZo4XuA==/3420580674756260.jpg?param=130y130"}
];
//future
var rank=[
{ title: "创奏", artist: "霜月はるか", mp3: "http://music.163.com/song/media/outer/url?id=645239.mp3", poster:"http://p1.music.126.net/Fp7CYfdZsQAYZls-gD8KpQ==/2262794929982835.jpg?param=130y130"},
{ title: "願い枯れゆく歌声", artist: "Ether", mp3: "http://music.163.com/song/media/outer/url?id=40915970.mp3", poster:"http://p1.music.126.net/DU6RM83OPR0KMcVP05f6zA==/3294136844455797.jpg?param=130y130"},
{ title: "LICHT MEER", artist: "河合夕子", mp3: "http://music.163.com/song/media/outer/url?id=499086.mp3", poster:"http://p1.music.126.net/z7Mk6Au_otaoWozoM-t62w==/2402432906715323.jpg?param=130y130"},
{ title: "Nocturne No. 2 ", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=1060914.mp3", poster:"http://p1.music.126.net/Dvhon4mH7qimTtE7q3omTw==/1419469524716144.jpg?param=130y130"},
{ title: "夜曲", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=5266269.mp3", poster:"http://p1.music.126.net/-jxEuvKopuUdXDTKL7KuWw==/105553116283769.jpg?param=130y130"},
{ title: "降E大调夜曲", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=25830129.mp3", poster:"http://p1.music.126.net/h3MYwTuGIpkWiMuBwZ3Vmg==/6631154628238015.jpg?param=130y130"},
{ title: "即兴幻想曲", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=25830133.mp3", poster:"http://p1.music.126.net/8cSVJulJa2tiLydRxyXuTg==/109951162938339077.jpg?param=130y130"},
{ title: "Nocturne op. 32", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=26160789.mp3", poster:"http://p1.music.126.net/MiXbBt6j6xWNlv_QCFSRAw==/2288083697427927.jpg?param=130y130"},
{ title: "Prelude in Des", artist: "Chopin", mp3: "http://music.163.com/song/media/outer/url?id=26818399.mp3", poster:"http://p1.music.126.net/68_Rrtyz1A9MGImm2cUb-w==/2078076976524854.jpg?param=130y130"}
];
// oline song/dream/
var main =[
{ title: "手写着从前", artist: "澤野弘之", mp3: "http://music.163.com/song/media/outer/url?id=448706025.mp3 ", poster: "http://p1.music.126.net/wME0oX7VY7fEkKvbXgzlrA==/19122706230471650.jpg?param=130y130" },
{ title: "God of ink", artist: "澤野弘之", mp3: "http://music.163.com/song/media/outer/url?id=484056491.mp3", poster: "http://p1.music.126.net/wME0oX7VY7fEkKvbXgzlrA==/19122706230471650.jpg?param=130y130" },
{ title: "white silence (album version)", artist: "TK from 凛として時雨", mp3: "http://music.163.com/song/media/outer/url?id=769672.mp3", poster: "http://p1.music.126.net/OX-yCGzOUHbhqiKK9Xx4Vg==/4442026976217692.jpg?param=130y130" },
{ title: "结び", artist: "饭碗的彼岸", mp3: "http://music.163.com/song/media/outer/url?id=445198872.mp3", poster: "http://p1.music.126.net/dlC4rAiDvq_uUi2fpnxKMA==/109951162819138078.jpg?param=130y130" },
{ title: "VV - ALK", artist: "Tielle", mp3: "http://music.163.com/song/media/outer/url?id=507116416.mp3", poster: "http://p1.music.126.net/WStPGvMUlDC89Wus9813zA==/109951163014870789.jpg?param=130y130" },
{ title: "M41+42", artist: "梶浦由記", mp3: "http://music.163.com/song/media/outer/url?id=591021.mp3", poster: "http://p1.music.126.net/lf9G9OQf_ouA_FuPZjm1HA==/890604418498843.jpg?param=130y130" },
{ title: "偏爱", artist: "张芸京", mp3: "http://music.163.com/song/media/outer/url?id=86369.mp3", poster: "http://p1.music.126.net/2-_sPmCBnN6VfwFmONRy2Q==/46179488378975.jpg?param=130y130" },
{ title: "算什么男人", artist: "周杰伦", mp3: "http://music.163.com/song/media/outer/url?id=29818120.mp3", poster: "http://p1.music.126.net/unW9CQcqjzh8BYjsVqosWw==/18874216602702134.jpg?param=130y130" },
{ title: "兰若词", artist: "刘亦菲", mp3: "http://music.163.com/song/media/outer/url?id=255739.mp3", poster: "http://p1.music.126.net/YIhF9kpKMx_wBKQFN-DwTw==/81363860472987.jpg?param=130y130" },
{ title: "open", artist: "miu-clips", mp3: "http://music.163.com/song/media/outer/url?id=618338.mp3", poster: "http://p1.music.126.net/fJ4Y4PN_h0Mg3ByQ2yfL9g==/838927371993316.jpg?param=130y130" }
];
var spirit =[
{ title: "M19+20", artist: "梶浦由記", mp3: "http://music.163.com/song/media/outer/url?id=591753.mp3 ", poster: "http://p1.music.126.net/lW4YKD6cMgm32nI66CzWVg==/5702067301704441.jpg?param=130y130" },
{ title: "Sis puella magica!", artist: "梶浦由記", mp3: "http://music.163.com/song/media/outer/url?id=496902072.mp3", poster: "http://p1.music.126.net/tFTRt1H87rReNTyO1K9IDQ==/18498183627713149.jpg?param=130y130" },
{ title: "月は优しく (月)", artist: "梶浦由記", mp3: "http://music.163.com/song/media/outer/url?id=590623.mp3", poster: "http://p1.music.126.net/7xaV2qB-T1d9m8b1XZC6tQ==/725677674344222.jpg?param=130y130" },
{ title: "Euterpe エウテルペ ", artist: "染音若蔡", mp3: "http://music.163.com/song/media/outer/url?id=452654214.mp3", poster: "http://p1.music.126.net/Iqckrd2sOB1ztqrSOw4XzA==/109951162841140691.jpg?param=130y130" },
{ title: "幻光", artist: "杨秉音", mp3: "http://music.163.com/song/media/outer/url?id=526989692.mp3", poster: "http://p1.music.126.net/4xHOkSVWH-n6p5pB3Jf0yQ==/109951162922204274.jpg" },
{ title: "世界の約束", artist: "神罗Shinra", mp3: "http://music.163.com/song/media/outer/url?id=429460870.mp3", poster: "http://p1.music.126.net/rkJSVKRZkfLXOoVwXtiB4w==/18283778858733705.jpg?param=130y130" },
{ title: "Cave OF Mind", artist: "久石譲", mp3: "http://music.163.com/song/media/outer/url?id=28457572.mp3", poster: "http://p1.music.126.net/HdmtedPRZEEBduHcmUnk3w==/853221023209311.jpg?param=130y130" },
{ title: "幽灵公主", artist: "K. Williams", mp3: "http://qzone.haoduoge.com/music3/2015-01-26/1422203098.mp3", poster: "http://p1.music.126.net/GNKtRK8w7edPw3jAsavL2A==/5980243743832365.jpg?param=130y130" },
{ title: "心之逆鳞", artist: "魏小涵", mp3: "http://music.163.com/song/media/outer/url?id=408280658.mp3", poster: "http://p1.music.126.net/k_WRxDY1qQ4ztB5uFFrvoA==/17907745881679448.jpg?param=130y130" },
{ title: "愛を教えてくれた君へ", artist: "Qaijff", mp3: "http://music.163.com/song/media/outer/url?id=521416051.mp3", poster: "http://p1.music.126.net/-c3qURPNRNLe-YJMbiZoKA==/109951163072509863.jpg?param=130y130" }
];
var magic =[
{ title: "群雄疾走", artist: "川井憲次", mp3: "http://music.163.com/song/media/outer/url?id=448153.mp3", poster: "http://p1.music.126.net/r4TK33y6f8cwlntVidXZbQ==/931286348726555.jpg?param=130y130" },
{ title: "Ghost of a smile", artist: "EGOIST", mp3: "http://music.163.com/song/media/outer/url?id=35955908.mp3", poster: "http://p1.music.126.net/ivONokvElv9ZCzyrZp84FQ==/3297435373557125.jpg?param=130y130" },
{ title: "樱子小姐的脚下埋着尸体", artist: "大竹佑季", mp3: "http://music.163.com/song/media/outer/url?id=36271375.mp3", poster:"http://p1.music.126.net/Q4Dg5QXwft213TBKMv26_A==/3276544653004159.jpg?param=130y130" },
{ title: "非科学的表裏一体", artist: "豚乙女", mp3: "http://music.163.com/song/media/outer/url?id=30870899.mp3", poster: "http://p1.music.126.net/84dpde0vkfsDAVsNNjulXg==/7906588115750467.jpg?param=130y130" },
{ title: "You're the Shine", artist: ":FELT", mp3: "http://music.163.com/song/media/outer/url?id=26260757.mp3", poster: "http://p1.music.126.net/b04i7LFbHLJkmkzwhwRLMA==/2343059278838229.jpg?param=130y130" },
{ title: "旅の途中", artist: "清浦夏実", mp3: "http://music.163.com/song/media/outer/url?id=26220167.mp3", poster: "http://p1.music.126.net/4BgAnUbCDFex3m4z-hWULA==/2509085534622060.jpg?param=130y130" },
{ title: "夏祭り", artist: "東山奈央", mp3: "http://music.163.com/song/media/outer/url?id=488388729.mp3", poster: "http://p1.music.126.net/3eyBH8RjxjXG-EqWShU1wg==/18887410742154555.jpg?param=130y130" },
{ title: "Sway", artist: "Nevve", mp3: "http://music.163.com/song/media/outer/url?id=475073464.mp3", poster: "http://p1.music.126.net/KmPcFcxxg61d15R8yu5x_A==/18681802069425034.jpg?param=130y130" },
{ title: "Vanish", artist: " Breathe Carolina", mp3: "http://music.163.com/song/media/outer/url?id=427542077.mp3", poster: "http://p1.music.126.net/xaX_RkkW0cT4f38k62N8yg==/3413983630702236.jpg?param=130y130" },
{ title: "It's Over", artist: "MEIDEN", mp3: "http://music.163.com/song/media/outer/url?id=477933011.mp3", poster: "http://p1.music.126.net/foJM2P9nq8pXHnCZjcf75w==/19047939439716625.jpg?param=130y130" }
];
//添加播放歌曲
$("#latest li").find("a.playIcon").click(function() {
var k=$(this).parent("li").index();
myPlaylist.add({
title:latest[k].title, artist:latest[k].artist,
//free:true,
mp3:latest[k].mp3,
//oga:"",
poster:latest[k].poster
});
myPlaylist.play(-1);
});
$("#popular li").find("a.playIcon").click(function() {
var k=$(this).parent("li").index();
myPlaylist.add({
title:popular[k].title, artist:popular[k].artist,
//free:true,
mp3:popular[k].mp3,
//oga:"",
poster:popular[k].poster
});
myPlaylist.play(-1);
});
$("#rank li").find("a.playIcon").click(function() {
var k=$(this).parent("li").index();
myPlaylist.add({
title:rank[k].title, artist:rank[k].artist,
//free:true,
mp3:rank[k].mp3,
//oga:"",
poster:rank[k].poster
});
myPlaylist.play(-1);
});
$("#main li").find("a.playIcon").click(function () {
var k = $(this).parent("li").index();
myPlaylist.add({
title: main[k].title, artist: main[k].artist,
//free:true,
mp3: main[k].mp3,
//oga:"",
poster: main[k].poster
});
myPlaylist.play(-1);
});
$("#spirit li").find("a.playIcon").click(function () {
var k = $(this).parent("li").index();
myPlaylist.add({
title: spirit[k].title,
artist: spirit[k].artist,
//free:true,
mp3: spirit[k].mp3,
//oga:"",
poster: spirit[k].poster
});
myPlaylist.play(-1);
});
$("#magic li").find("a.playIcon").click(function () {
var m = $(this).parent("li").index();
myPlaylist.add({
title: magic[m].title,
artist: magic[m].artist,
//free:true,
mp3: magic[m].mp3,
//oga:"",
poster: magic[m].poster
});
myPlaylist.play(-1);
});
//添加歌曲结束
//移除
$("#playlist-remove").click(function() {
myPlaylist.remove(); //(0 1 2 ... -2 -1)
});
$("#listRemove").click(function() {
myPlaylist.remove();
});
// 上一曲、下一曲
$("#playlist-next").click(function() {
myPlaylist.next();
});
$("#playlist-previous").click(function() {
myPlaylist.previous();
});
// 播放
$("#playlist-play").click(function() {
myPlaylist.play();
});
$("#playlist-play--2").click(function() {
myPlaylist.play(-2);
});
$("#playlist-play--1").click(function() {
myPlaylist.play(-1);
});
$("#playlist-play-0").click(function() {
myPlaylist.play(0);
});
$("#playlist-play-1").click(function() {
myPlaylist.play(1);
});
$("#playlist-play-2").click(function() {
myPlaylist.play(2);
});
// 暂停
$("#playlist-pause").click(function() {
myPlaylist.pause();
});
//是否自动播放
$("#playlist-option-autoPlay-true").click(function() {
myPlaylist.option("autoPlay", true);
});
$("#playlist-option-autoPlay-false").click(function() {
myPlaylist.option("autoPlay", false);
});
//播放器列表滚动条js------------------------------------------------------------------------------------------------
var $bar=$(".bar");
var $scrollBar=$(".scrollBar");
var $maxH = $scrollBar.innerHeight() - $bar.outerHeight();
var $ul=$(".jp-playlist ul");
var $li=$(".jp-playlist ul li");
var disY=0;
var iScale=0;
var iSpeed = 0;
$ul.height(1000); //设置ul的高度
$bar.mousedown(function (event){
var event = event || window.event;
disY = event.clientY - $(this).position().top;
$(document).bind("mousemove",function (event){
var event = event || window.event;
var iH = event.clientY - disY;
iH <= 0 && (iH = 0);
iH >= $maxH && (iH = $maxH);
$bar.css({top : iH + "px"});
iScale = - iH/$maxH;
$ul.css({top:iScale*($ul.height()-$(".jp-playlist-box").height())+"px"});
return false;
});
$(document).bind("mouseup",function (){
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
return false;
});
//当鼠标移入,监听事件
$(".jp-playlist-box").mouseover(function(){
//鼠标滚轮
addHandler(this, "mousewheel", mouseWheel);//IE
addHandler(this, "DOMMouseScroll", mouseWheel);//标准
return false;
});
//绑定事件重写兼容
function addHandler(element, type, handler){
return element.addEventListener ? element.addEventListener(type, handler, false) :
element.attachEvent("on" + type, handler, false)
}
//鼠标滚轮事件
function mouseWheel(event){
var event = event || window.event;
if(event.wheelDelta) {//IE
iSpeed = event.wheelDelta > 0 ? -3 : 3;
}else if(event.detail) {//火孤
iSpeed = event.detail < 0 ? -3 : 3;
}
move();
//FF,绑定事件,阻止默认事件
if (event.preventDefault) {
event.preventDefault();
}
} ;
//滚轮 要执行的
function move(){
var iH=$bar.position().top;
iH=iH+iSpeed;
iH <= 0 && (iH = 0);
iH >= $maxH && (iH = $maxH);
$bar.css({top:iH+"px"});
iScale = - iH/$maxH;
$ul.css({top:iScale*($ul.height()-$(".jp-playlist-box").height())+"px"});
return false;
};
//播放器列表滚动条js 结束------------------------------------------------
//音乐播放器 收缩、展开----------------------------------------------
var fold=true;//标识
//页面加载时,播放器运动出来,延迟2秒,运动回去
$(".jp-video").animate({left:0},"slow",function(){
slideOut($(this));
}).delay(2000).animate({left:"-480px"},350,function(){
slideIn($(this));
});
//点击按钮运动出来,或运动回去
$("#btnfold").mouseover(function(){
if(fold){
$(".jp-video").animate({left:"-480px"},350,function(){
slideIn($(this));
});
}else{
$(".jp-video").animate({left:0},350,function(){
slideOut($(this));
});
}
});
//封装按钮背景切换1
function slideOut(obj){
$("#btnfold").attr({"title":"点击收缩"});
obj.find("span").css({"transform":"rotate(180deg)"});
obj.find("span").css({"MozTransform":"rotate(180deg) translateX(2px)"});
obj.find("span").css({"WebkitTransform":"rotate(180deg)"});
fold=true;
};
//封装按钮背景切换2
function slideIn(obj){
$("#btnfold").attr({"title":"点击展开"});
obj.find("span").css({"transform":"rotate(0deg)"});
obj.find("span").css({"MozTransform":"rotate(0deg) translateX(-2px)"});
obj.find("span").css({"WebkitTransform":"rotate(0deg)"});
fold=false;
};
//歌曲列表展开、收缩---------------------------------------------------
var iOpen=false;
$("#listClose").click(function(){
if(iOpen){
$(".jp-playlist-box").animate({height:0},100);
$("#btnfold").css({top:"5px"});
$("#listRemove").css({display:"none"});
$(".scrollBar").css({display:"none"});
$(".jp-video").animate({height:"94px",bottom:"20px"},100);
iOpen=false;
}else{
$(".jp-playlist-box").animate({height:"80px"},100);
$("#btnfold").css({top:"52px"});
$("#listRemove").css({display:"block"});
$(".scrollBar").css({display:"block"});
$(".jp-video").animate({height:"175px",bottom:"20px"},100);
iOpen=true;
}
});

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Loading…
Cancel
Save