◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“Widget:EDplayer/CDCoverTest”的版本间的差异
Mikumikuer(讨论 | 贡献) |
(补充 EDsongs[8]) |
||
(未显示3个用户的18个中间版本) | |||
第1行: | 第1行: | ||
<includeonly><style type="text/css"> | <includeonly><style type="text/css"> | ||
+ | .record-container { | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | width: 350px; | ||
+ | height: 350px; | ||
+ | position: relative; | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | .record { | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | top: 0px; | ||
+ | width: 350px; | ||
+ | height: 350px; | ||
+ | border-radius: 50%; | ||
+ | background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px); | ||
+ | background-size: 50% 100%, 100% 50%, 100% 100%; | ||
+ | } | ||
+ | .record:after { | ||
+ | position: absolute; | ||
+ | top: 50%; left: 50%; | ||
+ | margin: -35px; | ||
+ | border: solid 1px #d9a388; | ||
+ | width: 68px; height: 68px; | ||
+ | border-radius: 50%; | ||
+ | box-shadow: 0 0 0 4px #da5b33, | ||
+ | inset 0 0 0 27px #da5b33; | ||
+ | background: #b5ac9a; | ||
+ | content: ''; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
div.EDLIST { | div.EDLIST { | ||
user-select: none; | user-select: none; | ||
第30行: | 第65行: | ||
</style> | </style> | ||
<table class="stattable" style="width:1100px; text-align:center;"><tr><th colspan="4">ED PLAYER</th></tr> | <table class="stattable" style="width:1100px; text-align:center;"><tr><th colspan="4">ED PLAYER</th></tr> | ||
− | <tr><td style="text-align:center; width:300px; vertical-align:top;"> | + | <tr><td style="text-align:center; width:300px; vertical-align:top;overflow-y:scroll"> |
<div style="user-select:none; width:305px; padding:5px; font-weight: bold;">◊ 乐曲列表 ◊</div><hr style="background-color:black;"/> | <div style="user-select:none; width:305px; padding:5px; font-weight: bold;">◊ 乐曲列表 ◊</div><hr style="background-color:black;"/> | ||
<div class="EDLIST">music1</div><hr style="background-color:black;"/> | <div class="EDLIST">music1</div><hr style="background-color:black;"/> | ||
第37行: | 第72行: | ||
<div class="EDLIST">music4</div><hr style="background-color:black;"/> | <div class="EDLIST">music4</div><hr style="background-color:black;"/> | ||
<div class="EDLIST">music5</div><hr style="background-color:black;"/> | <div class="EDLIST">music5</div><hr style="background-color:black;"/> | ||
+ | <div class="EDLIST">music6</div><hr style="background-color:black;"/> | ||
+ | <div class="EDLIST">music7</div><hr style="background-color:black;"/> | ||
+ | <div class="EDLIST">music8</div><hr style="background-color:black;"/> | ||
+ | <div class="EDLIST">music9</div><hr style="background-color:black;"/> | ||
+ | <div class="EDLIST">music10</div><hr style="background-color:black;"/> | ||
</td><td id="EDCG" colspan="3" style="text-align:center; vertical-align:middle; height:450px;"> | </td><td id="EDCG" colspan="3" style="text-align:center; vertical-align:middle; height:450px;"> | ||
− | <div id="EDNAME" style="color:#eaeaea; font-weight:lighter; font-size:large;"></div><br></td></tr> | + | <div id="EDNAME" style="color:#eaeaea; font-weight:lighter; font-size:large;"></div><br><div id='EDCOVER' class='record-container'> |
+ | <div class='record' ></div> | ||
+ | </div></td></tr> | ||
<tr><td style="width:300px; font-size:large; height:40px;"><div> | <tr><td style="width:300px; font-size:large; height:40px;"><div> | ||
<div id="EDBACK" class="EDBTN" style="float:left; margin:0px 1px;">⋘</div> | <div id="EDBACK" class="EDBTN" style="float:left; margin:0px 1px;">⋘</div> | ||
第59行: | 第101行: | ||
/* ED名称 */ | /* ED名称 */ | ||
var EDnames = new Array(EDlist.length + 1); | var EDnames = new Array(EDlist.length + 1); | ||
− | EDnames[0] = "塌缩点 What am I Fighting for"; | + | EDnames[0] = "塌缩点 - What am I Fighting for"; |
− | EDnames[1] = "异构体 シラカバの光"; | + | EDnames[1] = "异构体 - シラカバの光"; |
− | EDnames[2] = "裂变链接 Connexion"; | + | EDnames[2] = "裂变链接 - Connexion"; |
− | EDnames[3] = "偏振光 Polaris"; | + | EDnames[3] = "偏振光 - Polaris"; |
− | EDnames[4] = "双联乱数 Rainfall"; | + | EDnames[4] = "双联乱数 - Rainfall"; |
+ | EDnames[5] = "镜像论 - A Moment of My Nightmare"; | ||
+ | EDnames[6] = "熵减焓增 - Schicksal"; | ||
+ | EDnames[7] = "静风点 - Solar Sea"; | ||
+ | EDnames[8] = "纵向应变 - Twilight"; | ||
+ | EDnames[9] = "慢休克 - Anna"; | ||
for(var i=0; i<EDlist.length; i++)EDlist[i].innerHTML = EDnames[i]; | for(var i=0; i<EDlist.length; i++)EDlist[i].innerHTML = EDnames[i]; | ||
/* ED地址 */ | /* ED地址 */ | ||
var EDsongs = new Array(EDlist.length + 1); | var EDsongs = new Array(EDlist.length + 1); | ||
− | EDsongs[0] = " | + | EDsongs[0] = "/images/4/47/GF_Song.wav"; |
− | EDsongs[1] = " | + | EDsongs[1] = "/images/1/13/GF_MAP_EX_8_4_1.mp3"; |
− | EDsongs[2] = " | + | EDsongs[2] = "/images/8/82/M_19summer_song.wav"; |
− | EDsongs[3] = " | + | EDsongs[3] = "/images/e/eb/M_20winter_end.wav"; |
− | EDsongs[ | + | EDsongs[4] = "/images/4/47/GF_EV9_ED_1.wav"; |
+ | EDsongs[5] = "/images/6/6f/GF_21winter_song.wav"; | ||
+ | EDsongs[6] = "/images/d/d4/GF_21summer_song.mp3"; | ||
+ | EDsongs[7] = "/images/3/3c/%E9%9D%99%E9%A3%8E%E7%82%B9_Solar_Sea.mp3"; | ||
+ | EDsongs[8] = "/images/5/51/GF_2022_Summer_ED.wav"; | ||
+ | EDsongs[9] = "/images/5/58/BGM_23S_ED.mp3"; | ||
/* ED配图地址 */ | /* ED配图地址 */ | ||
var EDpics = new Array(EDlist.length + 1); | var EDpics = new Array(EDlist.length + 1); | ||
− | EDpics[0] = " | + | EDpics[0] = "/images/4/49/ED_PIC_%E5%9D%8D%E7%BC%A9%E7%82%B9.png"; |
− | EDpics[1] = " | + | EDpics[1] = "/images/8/8a/ED_PIC_%E5%BC%82%E6%9E%84%E4%BD%93.jpg"; |
− | EDpics[2] = " | + | EDpics[2] = "/images/4/42/ED_PIC_%E8%A3%82%E5%8F%98%E9%93%BE%E6%8E%A5.jpg"; |
− | EDpics[3] = " | + | EDpics[3] = "/images/4/43/ED_PIC_%E5%81%8F%E6%8C%AF%E5%85%89.jpg"; |
− | EDpics[4] = " | + | EDpics[4] = "/images/f/f0/ED_PIC_%E5%8F%8C%E8%81%94%E4%B9%B1%E6%95%B0.png"; |
+ | EDpics[5] = "/images/c/c6/ED_PIC_%E9%95%9C%E5%83%8F%E8%AE%BA.png"; | ||
+ | EDpics[6] = "/images/9/9b/ED_PIC_%E7%86%B5%E5%87%8F%E7%84%93%E5%A2%9E.png"; | ||
+ | EDpics[7] = "/images/6/60/ED_PIC_%E9%9D%99%E9%A3%8E%E7%82%B9.png"; | ||
+ | EDsongs[8] = "/images/f/f2/Login_20220915.png"; | ||
var EDnow = new Audio; | var EDnow = new Audio; | ||
第89行: | 第145行: | ||
var EDcg = new Image; | var EDcg = new Image; | ||
− | EDcg.style. | + | EDcg.style.cssText = "width:300px;height:300px;border-radius:300px;object-fit:cover;z-index: 10;position: relative;padding: 25px;margin: auto;"; |
− | + | document.querySelector("#EDCOVER").appendChild(EDcg); | |
− | |||
− | |||
− | |||
− | document.querySelector("# | ||
/* 首次加载 */ | /* 首次加载 */ | ||
第105行: | 第157行: | ||
function EDselect(element){ | function EDselect(element){ | ||
EDlast = EDnow.getAttribute("number"); | EDlast = EDnow.getAttribute("number"); | ||
− | |||
for(var i=0; i<EDlist.length; i++){ | for(var i=0; i<EDlist.length; i++){ | ||
EDlist[i].style.backgroundColor = "inherit"; | EDlist[i].style.backgroundColor = "inherit"; | ||
第111行: | 第162行: | ||
element.style.backgroundColor = "#f4c430"; | element.style.backgroundColor = "#f4c430"; | ||
element.style.color = "black"; | element.style.color = "black"; | ||
− | + | ||
− | |||
EDnow.setAttribute("number", Number(element.getAttribute("index"))); | EDnow.setAttribute("number", Number(element.getAttribute("index"))); | ||
EDnow.setAttribute("src", EDsongs[Number(element.getAttribute("index"))]); | EDnow.setAttribute("src", EDsongs[Number(element.getAttribute("index"))]); | ||
EDnow.currentTime = 0; | EDnow.currentTime = 0; | ||
− | EDnow.play(); | + | EDnow.play();EDcg.parentNode.classList.add('CDspin');EDcg.parentNode.classList.remove('CDpause'); |
document.querySelector("#EDNAME").innerHTML = EDnames[Number(element.getAttribute("index"))]; | document.querySelector("#EDNAME").innerHTML = EDnames[Number(element.getAttribute("index"))]; | ||
第155行: | 第205行: | ||
EDstop.setAttribute("status", "start"); | EDstop.setAttribute("status", "start"); | ||
EDstop.innerHTML = "∥"; | EDstop.innerHTML = "∥"; | ||
− | EDnow.play(); | + | EDnow.play();EDcg.parentNode.classList.add('CDspin');EDcg.parentNode.classList.remove('CDpause') |
} else{ | } else{ | ||
EDstop.setAttribute("status", "stop"); | EDstop.setAttribute("status", "stop"); | ||
EDstop.innerHTML = "▷"; | EDstop.innerHTML = "▷"; | ||
− | EDnow.pause(); | + | EDnow.pause();EDcg.parentNode.classList.add('CDpause') |
} | } | ||
} | } | ||
第166行: | 第216行: | ||
document.querySelector("#EDRE").addEventListener("click", function(){EDreplay();}); | document.querySelector("#EDRE").addEventListener("click", function(){EDreplay();}); | ||
function EDreplay(){ | function EDreplay(){ | ||
− | EDnow.pause(); | + | EDnow.pause();var recap = EDcg.cloneNode(true);EDcg.parentNode.replaceChild(recap,EDcg);EDcg=recap; |
EDnow.currentTime = 0; | EDnow.currentTime = 0; | ||
− | EDnow.play(); | + | EDnow.play();EDcg.parentNode.classList.add('CDspin');EDcg.parentNode.classList.remove('CDpause') |
} | } | ||
2023年7月25日 (二) 20:47的最新版本
ED PLAYER | |||
---|---|---|---|
◊ 乐曲列表 ◊ music1 music2 music3 music4 music5 music6 music7 music8 music9 music10 |
| ||
⋘
▷
⇵
⋙
List |