微件:SetCharacterv2：修订间差异
跳到导航
跳到搜索
无编辑摘要 |
StarHeartHunt（讨论 | 贡献） 无编辑摘要 |
||
| （未显示9个用户的443个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly><script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |||
<script class="navigation-not-searchable"> | |||
document.onkeydown=function(event){ | |||
var e = event || window.event || arguments.callee.caller.arguments[0]; | |||
< | var fulldis=document.getElementById("fullOff").style.display; | ||
< | if(e && e.keyCode==27){ | ||
if(fulldis=="block"){refullscreen();} | |||
} | |||
}; | |||
document.addEventListener('DOMContentLoaded',function(){ | |||
var csscheck=document.getElementsByClassName("pre-content")[0]; | |||
if(csscheck==null||csscheck==undefined){ | |||
}else{ | |||
var charwd=document.getElementsByClassName("pre-content")[0].clientWidth; | |||
var charheight=charwd/576; | |||
document.getElementsByClassName("outpact")[0].style.transform="scale("+(charwd/576)+")"; | |||
document.getElementsByClassName("charinfo-container")[0].style.height=1024*charheight+"px"; | |||
mobilecss(); | |||
} | |||
}); | |||
function mobilecss(){ | |||
var skinname=document.getElementById("skin1").style.display; | |||
if(skinname=="none"){ | |||
document.getElementById("skinnoinfo").style.display="block"; | |||
} | |||
document.getElementById("thidebtn").style.display="block"; | |||
document.getElementById("widebtn").style.display="none"; | |||
document.getElementById("fullscbtn").style.display="none"; | |||
document.getElementById("clearbtn").style.display="none"; | |||
document.getElementsByClassName("all-wrap")[0].style.width="576px"; | |||
document.getElementsByClassName("all-wrap")[0].style.height="1024px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.width="576px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.height="1024px"; | |||
document.getElementsByClassName("all")[0].style.width="576px"; | |||
document.getElementsByClassName("all")[0].style.height="1024px"; | |||
document.getElementsByClassName("outpact")[0].style.width="576px"; | |||
document.getElementsByClassName("outpact")[0].style.height="1024px"; | |||
document.getElementsByClassName("inpact")[0].style.width="576px"; | |||
document.getElementsByClassName("inpact")[0].style.height="1024px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.left="0px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.top="90px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.zIndex="5"; | |||
document.getElementsByClassName("features-wrapper")[0].style.left="15px"; | |||
document.getElementsByClassName("features-wrapper")[0].style.zIndex="999"; | |||
document.getElementsByClassName("features-wrapperpro")[0].style.left="15px"; | |||
document.getElementsByClassName("features-wrapperpro")[0].style.zIndex="999"; | |||
document.getElementsByClassName("explain-wrapper")[0].style.left="15px"; | |||
document.getElementsByClassName("explain-wrapper")[0].style.zIndex="999"; | |||
document.getElementsByClassName("explain-wrapperpro")[0].style.left="15px"; | |||
document.getElementsByClassName("explain-wrapperpro")[0].style.zIndex="999"; | |||
document.getElementsByClassName("charclass")[0].style.bottom="335px"; | |||
document.getElementsByClassName("charclasspro")[0].style.bottom="335px"; | |||
document.getElementsByClassName("chartag1-wrapper")[0].style.bottom="335px"; | |||
document.getElementsByClassName("chartag2-wrapper")[0].style.bottom="385px"; | |||
document.getElementsByClassName("chartag1-wrapperpro")[0].style.bottom="335px"; | |||
document.getElementsByClassName("chartag2-wrapperpro")[0].style.bottom="385px"; | |||
document.getElementsByClassName("explain-wrapper")[0].style.height="200px"; | |||
document.getElementsByClassName("explain-wrapperpro")[0].style.height="200px"; | |||
document.getElementsByClassName("features-wrapper")[0].style.bottom="220px"; | |||
document.getElementsByClassName("features-wrapperpro")[0].style.bottom="220px"; | |||
document.getElementsByClassName("charname")[0].style.bottom="415px"; | |||
document.getElementsByClassName("charname-en")[0].style.bottom="480px"; | |||
document.getElementsByClassName("star")[0].style.bottom="515px"; | |||
document.getElementById("cv-wrapper").style.left="auto"; | |||
document.getElementById("cv-wrapper").style.right="15px"; | |||
document.getElementById("cv-wrapper").style.width="230px"; | |||
document.getElementById("cv-wrapper").style.bottom="380px"; | |||
document.getElementById("cv-wrapper").style.backgroundColor="#313131"; | |||
document.getElementById("cv-content").style.backgroundColor="#313131"; | |||
document.getElementById("cv-content").style.borderLeft="1px solid black"; | |||
document.getElementsByClassName("cv-bg")[0].style.width="230px"; | |||
document.getElementById("painter-wrapper").style.left="auto"; | |||
document.getElementById("painter-wrapper").style.right="15px"; | |||
document.getElementById("painter-wrapper").style.width="230px"; | |||
document.getElementById("painter-wrapper").style.bottom="340px"; | |||
document.getElementById("painter-wrapper").style.backgroundColor="#313131"; | |||
document.getElementById("painter-content")[0].style.backgroundColor="#313131"; | |||
document.getElementById("painter-content")[0].style.borderLeft="1px solid black"; | |||
document.getElementsByClassName("painter-bg")[0].style.width="230px"; | |||
document.getElementsByClassName("skinbutton-wrapper")[0].style.width="230px"; | |||
document.getElementsByClassName("skinbutton-wrapper")[0].style.top="auto"; | |||
document.getElementsByClassName("skinbutton-wrapper")[0].style.bottom="20px"; | |||
document.getElementsByClassName("skinbutton-wrapper")[0].style.height="315px"; | |||
document.getElementsByClassName("bg")[0].style.height="1024px"; | |||
document.getElementsByClassName("bg")[0].style.width="576px"; | |||
document.getElementsByClassName("skinbg")[0].style.height="1024px"; | |||
document.getElementsByClassName("skinbg")[0].style.width="576px"; | |||
document.getElementsByClassName("skinbgimg")[0].style.height="100%"; | |||
document.getElementsByClassName("skinbgimg")[0].style.width="100%"; | |||
document.getElementsByClassName("bgimg")[0].style.height="100%"; | |||
document.getElementsByClassName("bgimg")[0].style.width="100%"; | |||
var skbtnlist = document.getElementsByClassName("skinbutton"); | |||
if(skbtnlist){ | |||
for(var idx = 0; idx < skbtnlist.length; idx ++){ | |||
var mya = skbtnlist[idx]; | |||
mya.style.width = "230px"; | |||
} | |||
} | |||
var sknlist = document.getElementsByClassName("skinname"); | |||
if(sknlist){ | |||
for(var idx = 0; idx < sknlist.length; idx ++){ | |||
var mya = sknlist[idx]; | |||
mya.style.width = "150px"; | |||
} | |||
} | |||
} | |||
window.onresize = function(){ | |||
var width=window.innerWidth; | |||
var skinname=document.getElementById("skin1").style.display; | |||
if(width<1000){ | |||
if(skinname=="none"){ | |||
document.getElementById("skinnoinfo").style.display="block"; | |||
} | |||
}else{ | |||
document.getElementById("skinnoinfo").style.display="none"; | |||
} | |||
} | |||
</script> | |||
<style> | <style> | ||
:root{ | |||
--color1:<!--{$color1|escape:'javascript'}-->; | |||
--color2:<!--{$color2|escape:'javascript'}-->; | |||
--color3:<!--{$color3|escape:'javascript'}-->; | |||
--color4:<!--{$color4|escape:'javascript'}-->; | |||
--color5:<!--{$color5|escape:'javascript'}-->; | |||
--color6:<!--{$color6|escape:'javascript'}-->; | |||
--color7:<!--{$color7|escape:'javascript'}-->; | |||
--color8:<!--{$color8|escape:'javascript'}-->; | |||
--color9:<!--{$color9|escape:'javascript'}-->; | |||
--color10:<!--{$color10|escape:'javascript'}-->; | |||
} | |||
.charinfo-container img{ | |||
max-width: none; | |||
} | } | ||
.chartag2-content>a{ | |||
color: #ffffff; | |||
text-decoration: none; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .chartag2-contentpro>a{ | ||
color: rgba(34,75,197,.9); | |||
text-decoration: none; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .chartag2-content>a:visited{ | ||
color: #ffffff; | |||
} | } | ||
. | .chartag2-contentpro>a:visited{ | ||
color: rgba(34,75,197,.9); | |||
} | |||
.chartag2-content>a:hover{ | |||
color: #00B0FF; | |||
} | } | ||
. | .chartag2-contentpro>a:hover{ | ||
color: #00B0FF; | |||
} | } | ||
. | .chartag1-content>a{ | ||
color: #ffffff; | |||
text-decoration: none; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .chartag1-contentpro>a{ | ||
color: rgba(34,75,197,.9); | |||
text-decoration: none; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .chartag1-content>a:visited{ | ||
color: #ffffff; | |||
} | } | ||
. | .chartag1-contentpro>a:visited{ | ||
color: rgba(34,75,197,.9); | |||
} | |||
.chartag1-content>a:hover{ | |||
color: #00B0FF; | |||
} | } | ||
. | .chartag1-contentpro>a:hover{ | ||
color: #00B0FF; | |||
} | } | ||
. | .cv-content>a{ | ||
text-decoration: none; | |||
color: #ffffff; | |||
background: none; | |||
border-bottom: 1px dashed white; | |||
transition: all 0.3s ease-in-out; | |||
white-space: nowrap; | |||
} | } | ||
. | .cv-contentpro>a{ | ||
text-decoration: none; | |||
color: rgba(34,75,197,1); | |||
background: none; | |||
border-bottom: 1px dashed rgba(34,75,197,1); | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .painter-content>a{ | ||
text-decoration: none; | |||
color: #ffffff; | |||
background: none; | |||
border-bottom: 1px dashed white; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.painter-contentpro>a{ | |||
text-decoration: none; | |||
color: rgba(34,75,197,1); | |||
background: none; | |||
border-bottom: 1px dashed rgba(34,75,197,1); | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.cv-content>a:visited{ | |||
color: #ffffff; | |||
} | |||
.cv-content>a:hover{ | |||
color: #00B0FF; | |||
border-color: #00B0FF; | |||
} | } | ||
.painter-content>a:visited{ | |||
color: #ffffff; | |||
} | } | ||
.painter-content>a:hover{ | |||
color:#00B0FF; | |||
border-color: #00B0FF; | |||
} | } | ||
.charlogo{ | |||
. | |||
position: absolute; | position: absolute; | ||
top:5px; | |||
left:0px; | |||
z-index: 4; | |||
width:260px; | |||
height:260px; | |||
} | } | ||
. | .deflogo{ | ||
filter: invert(100%); | |||
opacity: 0.3; | |||
} | } | ||
. | .logo-wrapper{ | ||
position: relative; | |||
width: 260px; | |||
height:260px; | |||
} | } | ||
. | .logo-wrap{ | ||
position: absolute; | |||
max-width: 100%; | |||
max-height:100%; | |||
height: auto; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate3d(-50%,-50%,0); | |||
-webkit-transform: translate3d(-50%,-50%,0); | |||
} | } | ||
. | .all{ | ||
width:1024px; | |||
height:576px; | |||
position: relative; | |||
overflow: hidden; | |||
-webkit-user-select:none; | |||
-moz-user-select:none; | |||
-ms-user-select:none; | |||
user-select:none; | |||
} | } | ||
. | .all-wrapper{ | ||
position: absolute; | |||
width:1024px; | |||
height:576px; | |||
} | } | ||
. | .all-wrap{ | ||
position:relative; | |||
width:1024px; | |||
height:576px; | |||
} | } | ||
. | .bg{ | ||
position: absolute; | |||
z-index: 1; | |||
width:1024px; | |||
} | |||
.skinbg{ | |||
position: absolute; | |||
z-index: 2; | |||
width:1024px; | |||
} | } | ||
. | .skinbg-in{ | ||
position: absolute; | |||
z-index: 2; | |||
animation: skinbg-in 0.15s ease-out 1 forwards; | |||
} | } | ||
. | .skinbg-out{ | ||
position: absolute; | |||
z-index: 2; | |||
animation: skinbg-out 0.15s ease-out 1 forwards; | |||
} | } | ||
. | .skinbgcolor-in{ | ||
position:absolute; | |||
left:-35px; | |||
top:-200px; | |||
width:560px; | |||
height:200px; | |||
z-index: 3; | |||
animation: skinbgcolor-in 0.1s ease-out 1 forwards; | |||
} | } | ||
. | .skinbgcolor-out{ | ||
position:absolute; | |||
left:-35px; | |||
top:-200px; | |||
width:560px; | |||
height:200px; | |||
z-index: 3; | |||
animation: skinbgcolor-out 0.1s ease-out 1 forwards; | |||
} | } | ||
@keyframes skinbg-in { | |||
0%{ | |||
opacity:0; | |||
} | |||
100%{ | |||
opacity:1; | |||
} | |||
} | } | ||
@keyframes skinbg-out { | |||
0%{ | |||
opacity:1; | |||
} | |||
100%{ | |||
opacity:0; | |||
} | |||
} | } | ||
@keyframes skinbgcolor-in { | |||
0%{ | |||
transform: rotate(0deg); | |||
transform-origin:right bottom; | |||
} | |||
100%{ | |||
transform: rotate(-20deg); | |||
transform-origin:right bottom; | |||
} | |||
} | } | ||
@keyframes skinbgcolor-out { | |||
100%{ | |||
transform: rotate(0deg); | |||
transform-origin:right bottom; | |||
} | |||
0%{ | |||
transform: rotate(-20deg); | |||
transform-origin:right bottom; | |||
} | |||
} | } | ||
. | .explain-wrapper{ | ||
position: absolute; | position: absolute; | ||
right:15px; | right:15px; | ||
bottom:15px; | |||
width:300px; | width:300px; | ||
height: | height:190px; | ||
background-color:rgba(49,49,49,.0 | background-color: rgba(49,49,49,.85); | ||
box-shadow:0 0 10px #000; | |||
z-index: | line-height:1.6; | ||
z-index: 999; | |||
transform:translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .explain-wrapperpro{ | ||
position: absolute; | |||
right:15px; | |||
bottom:15px; | |||
width:300px; | |||
height:190px; | |||
background-color: rgba(255,255,255,.9); | |||
box-shadow:0 0 10px rgba(34,75,197,.9); | |||
line-height:1.6; | |||
z-index: 999; | |||
transform:translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .explain-title{ | ||
color:# | padding-top: 5px; | ||
padding-left: 10px; | |||
font-size: 16px; | |||
color:#c9c9c9; | |||
} | } | ||
. | .explain-titlepro{ | ||
padding-top: 5px; | |||
padding-left: 10px; | |||
font-size: 16px; | |||
color:rgba(34,75,197,.9); | |||
} | |||
.explain-type{ | |||
font-size:14px; | |||
color:black; | |||
padding-left:5px; | |||
padding-right: 5px; | |||
background-color:#ffffff; | |||
} | |||
.explain-typepro{ | |||
font-size:14px; | |||
color:white; | color:white; | ||
padding-left:5px; | |||
padding-right: 5px; | |||
background-color:rgba(34,75,197,.9); | |||
} | } | ||
. | .explain-skin1type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color1); | |||
background-color: var(--color1); | |||
} | } | ||
. | .explain-skin2type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color2); | |||
background-color: var(--color2); | |||
} | } | ||
. | .explain-skin3type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color3); | |||
background-color: var(--color3); | |||
} | } | ||
. | .explain-skin4type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color4); | |||
background-color: var(--color4); | |||
} | } | ||
. | .explain-skin5type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color5); | |||
background-color: var(--color5); | |||
} | } | ||
. | .explain-skin6type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color6); | |||
background-color: var(--color6); | |||
} | } | ||
. | .explain-skin7type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color7); | |||
background-color: var(--color7); | |||
} | } | ||
. | .explain-skin8type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color8); | |||
background-color: var(--color8); | |||
} | } | ||
. | .explain-skin9type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color9); | |||
background-color: var(--color9); | |||
} | } | ||
. | .explain-skin10type{ | ||
font-size:14px; | |||
color:white; | |||
left: | padding-left:5px; | ||
padding-right: 5px; | |||
background-color:var(--color10); | |||
background-color: var(--color10); | |||
} | } | ||
. | .typewrapper{ | ||
padding-top:2px; | |||
padding-left:10px; | |||
} | } | ||
. | .explain-content{ | ||
padding-top:2px; | |||
left: | padding-left: 10px; | ||
padding-right: 10px; | |||
color:white; | |||
font-size:14px; | |||
} | } | ||
. | .explain-contentpro{ | ||
padding-top:2px; | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
padding- | color:rgba(34,75,197,.9); | ||
font-size:14px; | |||
} | } | ||
. | .features-wrapper{ | ||
position: absolute; | position:absolute; | ||
right:15px; | |||
bottom:210px; | |||
width: | width: 300px; | ||
height: | height:110px; | ||
z-index: | background-color:rgba(49,49,49,.85); | ||
box-shadow: 0 0 20px #000; | |||
line-height:1.6; | |||
z-index: 999; | |||
transform:translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.features-wrapperpro{ | |||
position:absolute; | position:absolute; | ||
right:15px; | |||
width: | bottom:210px; | ||
width: 300px; | |||
height:110px; | |||
background-color:rgba(255,255,255,.9); | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
line-height:1.6; | |||
z-index: 999; | |||
transform:translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.features-title{ | |||
padding-top: 7px; | |||
padding-left: 10px; | |||
font-size:16px; | |||
color:#c9c9c9; | |||
} | } | ||
. | .features-titlepro{ | ||
padding-top: 7px; | |||
left: | padding-left: 10px; | ||
font-size:16px; | |||
color:rgba(34,75,197,.9); | |||
} | } | ||
. | .features-content{ | ||
width:280px; | |||
height:78px; | |||
text-align: center; | |||
font-size:14px; | |||
color:white; | |||
padding-left:10px; | |||
padding-right:10px; | |||
display:none; | |||
} | } | ||
. | .features-contentpro{ | ||
width:280px; | |||
height:78px; | |||
text-align: center; | text-align: center; | ||
padding- | font-size:14px; | ||
color:rgba(34,75,197,.9); | |||
padding-left:10px; | |||
padding-right:10px; | |||
display:none; | |||
} | } | ||
. | .skinbutton-wrapper{ | ||
position: absolute; | position: absolute; | ||
top:10px; | |||
right:15px; | |||
width: | width:300px; | ||
height: | height:240px; | ||
background: | background-color:rgba(49,49,49,.0); | ||
overflow: scroll; | |||
z-index: 998; | |||
-ms-overflow-style:none; | |||
overflow:-moz-scrollbars-none; | |||
scrollbar-width: none; | |||
transform:translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.skinbutton-wrapper::-webkit-scrollbar{ | |||
display: none; | |||
} | } | ||
. | .skinbutton:hover{ | ||
color:#22bbff; | |||
} | |||
.skinbutton{ | |||
position: relative; | |||
width:300px; | |||
height:60px; | |||
background:rgba(49,49,49,1); | |||
border-radius: 0px; | |||
margin-top: 5px; | |||
overflow: hidden; | |||
box-shadow: 0 0 5px #000; | |||
cursor:pointer; | |||
color:white; | color:white; | ||
transition: all 0.3s ease-in-out; | |||
} | } | ||
. | .headcolor1{ | ||
position: absolute; | position: absolute; | ||
top:0px; | |||
left:0px; | |||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color1); | |||
} | } | ||
. | .headcolor2{ | ||
position: absolute; | position: absolute; | ||
top:0px; | |||
left:0px; | |||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color2); | |||
} | } | ||
. | .headcolor3{ | ||
position: absolute; | position: absolute; | ||
left: | top:0px; | ||
left:0px; | |||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color3); | |||
} | } | ||
. | .headcolor4{ | ||
position:absolute; | position: absolute; | ||
top:0px; | |||
left:0px; | |||
width: | width:7px; | ||
height: | height:60px; | ||
display: inline-block; | |||
background-color: var(--color4); | |||
} | } | ||
. | .headcolor5{ | ||
position: absolute; | position: absolute; | ||
top: | top:0px; | ||
left: | left:0px; | ||
width:7px; | |||
color: | height:60px; | ||
display: inline-block; | |||
background-color: var(--color5); | |||
} | } | ||
. | .headcolor6{ | ||
position: absolute; | position: absolute; | ||
top:0px; | top:0px; | ||
left:0px; | |||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color6); | |||
} | } | ||
. | .headcolor7{ | ||
position:absolute; | position: absolute; | ||
top:0px; | |||
left:0px; | |||
width: | width:7px; | ||
height: | height:60px; | ||
display: inline-block; | |||
background-color: var(--color7); | |||
} | } | ||
. | .headcolor8{ | ||
position: | position: absolute; | ||
width: | top:0px; | ||
height: | left:0px; | ||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color8); | |||
} | } | ||
. | .headcolor9{ | ||
position: absolute; | position: absolute; | ||
top: | top:0px; | ||
left: | left:0px; | ||
width:7px; | |||
color: | height:60px; | ||
display: inline-block; | |||
background-color: var(--color9); | |||
} | } | ||
. | .headcolor10{ | ||
position: absolute; | position: absolute; | ||
top:0px; | top:0px; | ||
left:0px; | |||
width:7px; | |||
height:60px; | |||
display: inline-block; | |||
background-color: var(--color10); | |||
} | } | ||
. | .charhead{ | ||
position: absolute; | |||
top:-25px; | |||
left:7px; | |||
display: inline-block; | |||
} | } | ||
. | .headmask{ | ||
display: | position: absolute; | ||
left:107px; | |||
width:50px; | |||
height:60px; | |||
background-image: -webkit-linear-gradient(left, rgba(231,51, 104, 0) 0%, rgba(49,49,49,1) 100%); | |||
display:inline-block; | |||
margin-left:-50px; | |||
} | } | ||
. | .skinname{ | ||
position: absolute; | |||
right:0px; | |||
width:200px; | |||
padding-top:17px; | |||
background-color:rgba(0,255,0,0); | |||
text-align: center; | |||
} | } | ||
. | .charimg-wrapper{ | ||
position: absolute; | |||
left:200px; | |||
top:50px; | |||
width:512px; | |||
height:512px; | |||
z-index:5; | |||
zoom:100%; | |||
} | } | ||
#charImgmove{ | |||
width:512px; | |||
height:512px; | |||
position:relative; | |||
} | |||
#img{ | |||
. | position:absolute; | ||
height:100%; | |||
width:auto; | |||
cursor:move; | |||
} | |||
.anime-bg{ | |||
position:absolute; | |||
left:-35px; | |||
top:-200px; | |||
width:560px; | |||
height:200px; | |||
background-color:var(--color1); | |||
transform-origin:right bottom; | |||
transform: rotate(0deg); | |||
z-index: 3; | |||
} | } | ||
. | .charclass{ | ||
color: | position: absolute; | ||
left:15px; | |||
bottom:15px; | |||
width:72px; | |||
height:72px; | |||
z-index:999; | |||
border:2px solid #a0a0a0; | |||
border-radius: 5px; | |||
opacity: 0.7; | |||
background-color: transparent; | |||
} | } | ||
. | .charclasspro{ | ||
position: absolute; | |||
left:15px; | |||
bottom:15px; | |||
width:75px; | |||
height:75px; | |||
z-index:999; | |||
opacity: 1; | |||
background-color: rgba(255,255,255,.9); | |||
box-shadow:0 0 10px rgba(34,75,197,.9); | |||
} | } | ||
. | .chartag1-wrapper{ | ||
position:absolute; | position: absolute; | ||
left:100px; | |||
bottom: 15px; | |||
width: | width:210px; | ||
height: | height:45px; | ||
background | background:rgba(0,0,0,.7); | ||
opacity:1; | |||
border-radius: 5px; | |||
border:2px solid #a0a0a0; | |||
z-index: 999; | z-index: 999; | ||
} | } | ||
. | .chartag1-wrapperpro{ | ||
position: absolute; | position: absolute; | ||
left:100px; | |||
bottom: 15px; | |||
z-index: | width:215px; | ||
height:45px; | |||
background:rgba(255,255,255,.9); | |||
opacity:1; | |||
border-radius: 0px; | |||
border:0px solid #a0a0a0; | |||
box-shadow:0 0 5px rgba(34,75,197,.9); | |||
z-index: 999; | |||
} | |||
.chartag1-content{ | |||
color:white; | |||
font-size: 15px; | |||
text-align: center; | |||
padding-top: 10px; | |||
} | } | ||
. | .chartag1-contentpro{ | ||
color:rgba(34,75,197,.5); | |||
font-size: 15px; | |||
text-align: center; | |||
padding-top: 10px; | |||
} | } | ||
. | .chartag2-wrapper{ | ||
position: absolute; | position: absolute; | ||
left:100px; | |||
bottom: 65px; | |||
width:210px; | |||
height:22px; | |||
background:rgba(0,0,0,.7); | |||
opacity:1; | |||
border-radius: 5px; | |||
border:2px solid #a0a0a0; | |||
z-index: 999; | |||
} | } | ||
. | .chartag2-wrapperpro{ | ||
position:absolute; | position: absolute; | ||
left:100px; | |||
bottom: 65px; | |||
width: | width:215px; | ||
height: | height:24px; | ||
background | background:rgba(255,255,255,.9); | ||
box-shadow: | opacity:1; | ||
border-radius: 0px; | |||
border:0px solid #a0a0a0; | |||
box-shadow:0 0 5px rgba(34,75,197,.9); | |||
z-index: 999; | z-index: 999; | ||
} | |||
.chartag2-content{ | |||
color:white; | color:white; | ||
font-size: 15px; | |||
text-align: center; | |||
} | } | ||
. | .chartag2-contentpro{ | ||
color:rgba(34,75,197,.9); | |||
font-size: 15px; | |||
text-align: center; | |||
} | } | ||
. | .charname{ | ||
position: absolute; | position: absolute; | ||
left:18px; | |||
bottom:100px; | |||
z-index: | font-size: 72px; | ||
color: white; | |||
text-shadow: 2.5px 2.5px 0px rgba(0,0,0,.25),2.5px -2.5px 0px rgba(0,0,0,.25),-2.5px 2.5px 0px rgba(0,0,0,.25),-2.5px -2.5px 0px rgba(0,0,0,.25); | |||
font-weight:bolder; | |||
font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans","Helvetica Neue", sans-serif; | |||
z-index: 990; | |||
line-height:72px; | |||
} | } | ||
. | .charnamepro{ | ||
position: absolute; | position: absolute; | ||
left:18px; | |||
bottom:100px; | |||
font-size: 72px; | |||
z-index: | color: white; | ||
text-shadow: 2.5px 2.5px 0px rgba(34,75,197,.5),2.5px -2.5px 0px rgba(34,75,197,.5),-2.5px 2.5px 0px rgba(34,75,197,.5),-2.5px -2.5px 0px rgba(34,75,197,.5); | |||
font-weight:bolder; | |||
font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans","Helvetica Neue", sans-serif; | |||
z-index: 990; | |||
line-height:72px; | |||
} | } | ||
. | .charname-en{ | ||
position: absolute; | position: absolute; | ||
left:16px; | |||
bottom: 160px; | |||
font-size: | z-index: 999; | ||
font-size: 26px; | |||
color:white; | |||
font-weight: 900; | |||
-webkit-text-stroke: 1.2px #7e7e7e; | |||
font-family:微软雅黑,黑体; | |||
} | } | ||
. | .charname-enpro{ | ||
position:absolute | position: absolute; | ||
left:16px; | |||
left: | bottom: 160px; | ||
z-index: 999; | z-index: 999; | ||
font-size: 26px; | |||
color:white; | color:white; | ||
font-weight: 900; | |||
-webkit-text-stroke: 1.2px rgba(34,75,197,.9); | |||
font-family:微软雅黑,黑体; | |||
} | } | ||
. | .star{ | ||
position: absolute; | position: absolute; | ||
left:11px; | |||
bottom: 190px; | |||
z-index: | z-index: 999; | ||
width:250px; | |||
height:38px; | |||
} | } | ||
. | .cv-wrapper{ | ||
position: absolute | position:absolute; | ||
left:18px; | |||
left: | bottom: 235px; | ||
width:230px; | |||
height:30px; | |||
background-color: rgba(0,0,0,.7); | |||
z-index: 999; | |||
} | } | ||
. | .cv-wrapperpro{ | ||
position:absolute; | position:absolute; | ||
left:18px; | |||
bottom: 235px; | |||
width: | width:220px; | ||
height: | height:30px; | ||
background-color:rgba( | background-color:rgba(34,75,197,1); | ||
z-index: 999; | z-index: 999; | ||
} | } | ||
. | .cv-bg{ | ||
position: relative; | position:relative; | ||
width: | width:230px; | ||
height: | height:30px; | ||
} | |||
.cv-logo{ | |||
position:absolute; | |||
top:4px; | |||
left:4px; | |||
} | } | ||
. | .cv-title{ | ||
position: absolute; | position: absolute; | ||
top: | top:2px; | ||
left: | left:30px; | ||
font-size:16px; | |||
color:white; | |||
} | } | ||
. | .cv-content{ | ||
position: absolute; | position: absolute; | ||
top:- | right:0px; | ||
top:0px; | |||
width:200px; | |||
height:28px; | |||
border-left: 1px solid rgba(0,0,0,.85); | |||
text-align:center; | |||
font-size:16px; | |||
color:white; | |||
padding-top:2px; | |||
} | } | ||
. | .cv-contentpro{ | ||
position: absolute; | position: absolute; | ||
right: | right:0px; | ||
top: | top:0px; | ||
font-size: 16px; | width:120px; | ||
height:28px; | |||
background-color:white; | |||
text-align:center; | |||
font-size:16px; | |||
color:rgba(34,75,197,1); | |||
padding-top:2px; | |||
} | } | ||
. | .painter-wrapper{ | ||
position:absolute; | |||
left:18px; | |||
bottom: 275px; | |||
width:230px; | |||
height:30px; | |||
background-color:rgba( | background-color: rgba(0,0,0,.7); | ||
z-index: | z-index: 999; | ||
} | } | ||
.painter-wrapperpro{ | |||
position:absolute; | |||
left:18px; | |||
bottom: 275px; | |||
width:220px; | |||
height:30px; | |||
background-color:rgba(34,75,197,1); | |||
z-index: 999; | |||
} | } | ||
.painter-bg{ | |||
position:relative; | |||
width:230px; | |||
height:30px; | |||
} | } | ||
. | .painter-logo{ | ||
position:absolute; | |||
top:4px; | |||
left:4px; | |||
} | } | ||
. | .painter-title{ | ||
position: absolute; | |||
top:2px; | |||
left:30px; | |||
font-size:16px; | |||
color:white; | |||
} | } | ||
. | .painter-content{ | ||
position: absolute; | |||
right:0px; | |||
top:0px; | |||
width:200px; | |||
height:28px; | |||
border-left: 1px solid rgba(0,0,0,.85); | |||
text-align:center; | |||
font-size:16px; | |||
color:white; | |||
padding-top:2px; | |||
} | } | ||
. | .painter-contentpro{ | ||
position: | position: absolute; | ||
width: | right:0px; | ||
height: | top:0px; | ||
width:120px; | |||
height:28px; | |||
background-color: white; | |||
text-align:center; | |||
font-size:16px; | |||
color:rgba(34,75,197,1); | |||
padding-top:2px; | |||
} | |||
.stage0-btn-wrapper:hover{ | |||
color:#22bbff; | |||
} | |||
.stage0-btn-wrapper:hover .stage0-btn-logo{ | |||
display: none; | |||
} | } | ||
. | .stage0-btn-wrapper:hover .stage0-btn-logoafter{ | ||
display: block; | |||
} | } | ||
. | .stage1-btn-wrapper:hover{ | ||
color:#22bbff; | |||
} | } | ||
.stage1-btn-wrapper:hover .stage1-btn-logo{ | |||
display: none; | |||
} | |||
.stage1-btn-wrapper:hover .stage1-btn-logoafter{ | |||
display: block; | |||
} | |||
.stage2-btn-wrapper:hover{ | |||
color:#22bbff; | |||
} | |||
.stage2-btn-wrapper:hover .stage2-btn-logo{ | |||
display: none; | |||
} | |||
.stage2-btn-wrapper:hover .stage2-btn-logoafter{ | |||
display: block; | |||
} | |||
.stage3-btn-wrapper:hover{ | |||
color:#22bbff; | |||
} | |||
.stage3-btn-wrapper:hover .stage3-btn-logo{ | |||
display: none; | |||
} | |||
.stage3-btn-wrapper:hover .stage3-btn-logoafter{ | |||
display: block; | |||
} | |||
.stage0-btn-wrapper{ | |||
position:absolute; | |||
top:10px; | |||
left:15px; | |||
width:110px; | |||
height:40px; | |||
background-color:rgba(0,0,0,.8); | |||
box-shadow: 1px 1px 5px rgba(255,255,255,.8); | |||
z-index: 999; | |||
color:white; | |||
cursor: pointer; | |||
transform:translateY(0px); | |||
transition: all 0.3s ease-in-out; | |||
overflow: hidden; | |||
border-radius: 0px; | |||
} | |||
.satge0-btn-bg{ | |||
position: relative; | |||
width:100px; | |||
height:40px; | |||
} | |||
.stage0-btn-logo{ | |||
position: absolute; | |||
top:5px; | |||
left:5px; | |||
z-index: 1001; | |||
} | |||
.stage0-btn-logoafter{ | |||
position: absolute; | |||
top:5px; | |||
left:5px; | |||
display:none; | |||
z-index: 1001; | |||
} | |||
.stage0-btn-content{ | |||
position: absolute; | |||
right:5px; | |||
top:7px; | |||
font-size: 16px; | |||
} | |||
.stage1-btn-wrapper{ | |||
position:absolute; | |||
top:10px; | |||
left:130px; | |||
width:120px; | |||
height:40px; | |||
background-color:rgba(0,0,0,.8); | |||
box-shadow: 1px 1px 5px rgba(255,255,255,.8); | |||
z-index: 999; | |||
color:white; | |||
cursor: pointer; | |||
transform:translateY(0px); | |||
transition: all 0.3s ease-in-out; | |||
overflow: hidden; | |||
border-radius: 0px; | |||
} | |||
.satge1-btn-bg{ | |||
position: relative; | |||
width:120px; | |||
height:40px; | |||
} | |||
.stage1-btn-logo{ | |||
position: absolute; | |||
top:5px; | |||
left:5px; | |||
z-index: 1001; | |||
} | |||
.stage1-btn-logoafter{ | |||
position: absolute; | |||
top:5px; | |||
left:5px; | |||
display:none; | |||
z-index: 1001; | |||
} | |||
.stage1-btn-content{ | |||
position: absolute; | |||
right:10px; | |||
top:7px; | |||
font-size: 16px; | |||
} | |||
.stage2-btn-wrapper{ | |||
position:absolute; | |||
top:10px; | |||
left:255px; | |||
width:120px; | |||
height:40px; | |||
background-color:rgba(0,0,0,.8); | |||
box-shadow: 1px 1px 5px rgba(255,255,255,.8); | |||
z-index: 999; | |||
color:white; | |||
cursor: pointer; | |||
transform:translateY(0px); | |||
transition: all 0.3s ease-in-out; | |||
overflow: hidden; | |||
border-radius: 0px; | |||
} | } | ||
.satge2-btn-bg{ | |||
position: relative; | |||
width:120px; | |||
height:40px; | |||
} | |||
.stage2-btn-logo{ | |||
position: absolute; | |||
top:0px; | |||
left:5px; | |||
z-index: 1001; | |||
} | } | ||
.stage2-btn-logoafter{ | |||
position: absolute; | |||
top:0px; | |||
left:5px; | |||
display:none; | |||
z-index: 1001; | |||
} | } | ||
.stage2-btn-content{ | |||
position: absolute; | |||
right:10px; | |||
top:7px; | |||
font-size: 16px; | |||
} | |||
.stage3-btn-wrapper{ | |||
position:absolute; | |||
top:10px; | |||
left:380px; | |||
width:120px; | |||
height:40px; | |||
} | background-color:rgba(0,0,0,.8); | ||
box-shadow: 1px 1px 5px rgba(255,255,255,.8); | |||
z-index: 999; | |||
color:white; | |||
cursor: pointer; | |||
} | } | ||
.satge3-btn-bg{ | |||
position: relative; | |||
width:120px; | |||
height:40px; | |||
} | } | ||
.stage3-btn-logo{ | |||
position: absolute; | |||
top:-4px; | |||
left:5px; | |||
z-index: 1001; | |||
} | } | ||
.stage3-btn-logoafter{ | |||
position: absolute; | |||
top:-4px; | |||
left:5px; | |||
display:none; | |||
z-index: 1001; | |||
} | } | ||
.stage3-btn-content{ | |||
position: absolute; | |||
right:10px; | |||
top:7px; | |||
font-size: 16px; | |||
} | } | ||
.clearbtn{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:15px; | |||
right:320px; | |||
background-color:rgba(49,49,49,.85); | |||
z-index:1001; | |||
box-shadow: 0 0 10px #000; | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.clearbtnpro{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:15px; | |||
right:320px; | |||
background-color:rgba(34,75,197,.9); | |||
z-index:1001; | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.clearbtn:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
.clearbtnpro:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
#clearui{ | |||
padding-top:5px; | |||
padding-left:5px; | |||
display: block; | |||
} | } | ||
#returnui{ | |||
padding-top:5px; | |||
padding-left:5px; | |||
display: none; | |||
} | } | ||
.widebtn{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:95px; | |||
right:320px; | |||
background-color:rgba(49,49,49,.85); | |||
z-index:1001; | |||
box-shadow: 0 0 10px #000; | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.widebtnpro{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:95px; | |||
right:320px; | |||
background-color:rgba(34,75,197,.9); | |||
z-index:1001; | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.widebtn:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
.widebtnpro:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
.fullscbtn{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:55px; | |||
right:320px; | |||
background-color:rgba(49,49,49,.85); | |||
z-index:1001; | |||
box-shadow: 0 0 10px #000; | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.fullscbtnpro{ | |||
width:35px; | |||
height:35px; | |||
position: absolute; | |||
bottom:55px; | |||
right:320px; | |||
background-color:rgba(34,75,197,.9); | |||
z-index:1001; | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
cursor: pointer; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.fullscbtn:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
.fullscbtnpro:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | } | ||
#fullOn{ | |||
padding-top:5px; | |||
padding-left:7px; | |||
display: block; | |||
} | } | ||
#fullOff{ | |||
padding-top:5px; | |||
padding-left:7px; | |||
display: none; | |||
} | } | ||
#wideOn{ | |||
padding-top:5px; | |||
padding-left:5px; | |||
display: block; | |||
} | } | ||
#wideOff{ | |||
padding-top:5px; | |||
padding-left:5px; | |||
display: none; | |||
} | } | ||
.charimg-stage{ | |||
display: none; | |||
} | |||
.charimg-skin{ | |||
display: none; | |||
} | } | ||
.logodis{ | |||
display: none; | |||
} | } | ||
.outpact{ | |||
position: relative; | |||
width:1024px; | |||
height:576px; | |||
overflow: hidden; | |||
transform-origin:top left; | |||
} | |||
.inpact{ | |||
position:absolute; | |||
width: 1024px; | |||
height: 576px; | |||
} | |||
.rare{ | |||
display:none; | |||
} | |||
.starimg{ | |||
display:inline-block; | |||
} | |||
.limited{ | |||
display:none; | |||
background-color:#313131; | |||
color:white; | |||
padding-left:6px; | |||
padding-right:6px; | |||
box-shadow:0px 0px 5px #313131; | |||
font-size:14px; | |||
} | |||
.skinselect{ | |||
position:absolute; | |||
bottom:-10px; | |||
right:-5px; | |||
display:none; | |||
width:65px; | |||
opacity:.4; | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.anicss{ | |||
transform: translateX(0px); | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.painter-content>a:hover { | |||
color: #00b0ff; | |||
} | |||
.fullscreen::-webkit-scrollbar{ | |||
display:none; | |||
} | |||
.charinfo-container{ | |||
line-height: 1.6; | |||
overflow:hidden; | |||
} | |||
.thidebtn{ | |||
width: 40px; | |||
height: 40px; | |||
position: absolute; | |||
top: 10px; | |||
right: 15px; | |||
background-color: rgba(49,49,49,.85); | |||
z-index: 1001; | |||
box-shadow: 0 0 10px #000; | |||
cursor: pointer; | |||
display:none; | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.thidebtnpro{ | |||
width: 40px; | |||
height: 40px; | |||
position: absolute; | |||
top: 10px; | |||
right: 15px; | |||
background-color: rgba(34,75,197,.9); | |||
z-index: 1001; | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
cursor: pointer; | |||
display:none; | |||
transition: all 0.3s ease-in-out; | |||
} | |||
.thidebtn:hover{ | |||
box-shadow: 0 0 10px #fff; | |||
} | |||
.tclearui{ | |||
display: block; | |||
padding-top: 5px; | |||
padding-left: 5px; | |||
} | |||
.skinnoinfo{ | |||
width: 230px; | |||
height: 315px; | |||
position: absolute; | |||
bottom: 15px; | |||
right: 15px; | |||
background: rgba(49,49,49,.85); | |||
z-index: 1; | |||
box-shadow: 0 0 20px #000; | |||
} | |||
.skinnoinfopro{ | |||
width: 230px; | |||
height: 315px; | |||
position: absolute; | |||
bottom: 15px; | |||
right: 15px; | |||
background: rgba(255,255,255,.9); | |||
z-index: 1; | |||
box-shadow: 0 0 10px rgba(34,75,197,.9); | |||
} | |||
.skintitle{ | |||
padding-top: 7px; | |||
padding-left: 10px; | |||
font-size: 16px; | |||
color: #c9c9c9; | |||
} | |||
.skintitlepro{ | |||
padding-top: 7px; | |||
padding-left: 10px; | |||
font-size: 16px; | |||
color: rgba(34,75,197,.9); | |||
} | |||
.skincontent{ | |||
font-size: 30px; | |||
text-align: center; | |||
position: absolute; | |||
top: 50%; | |||
transform: translateY(-50%) translateX(-50%); | |||
left: 50%; | |||
/* transform: translateX(10px); */ | |||
width: 200px; | |||
font-weight: lighter; | |||
color: #c9c9c9; | |||
} | |||
.skincontentpro{ | |||
font-size: 30px; | |||
text-align: center; | |||
position: absolute; | |||
top: 50%; | |||
transform: translateY(-50%) translateX(-50%); | |||
left: 50%; | |||
/* transform: translateX(10px); */ | |||
width: 200px; | |||
font-weight: lighter; | |||
color: rgba(34,75,197,.9); | |||
} | |||
.rodesbg{ | |||
position:absolute; | |||
top:40px; | |||
left:0px; | |||
width:1920px; | |||
height:83px; | |||
background-image:url(//media.prts.wiki/1/19/Banner-pro.png); | |||
z-index:2; | |||
} | |||
.charinfoparticles{ | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 6; | |||
pointer-events: none; | |||
} | |||
@media screen and (max-width: 1000px) { | |||
#thidebtn{display:block;} | |||
#widebtn{display: none;} | |||
#fullscbtn{display: none;} | |||
#clearbtn{display: none;} | |||
.all-wrap,.all-wrapper,.all,.outpact,.inpact{ | |||
width: 576px; | |||
height: 1024px; | |||
} | |||
.charimg-wrapper{ | |||
left:0px; | |||
top:90px; | |||
} | |||
.features-wrapper{ | |||
left:15px; | |||
bottom:220px; | |||
} | |||
.features-wrapperpro{ | |||
left:15px; | |||
bottom:220px; | |||
} | |||
.explain-wrapper{ | |||
left:15px; | |||
height:200px; | |||
} | |||
.explain-wrapperpro{ | |||
left:15px; | |||
height:200px; | |||
} | |||
.charclass{ | |||
bottom:335px; | |||
} | |||
.charclasspro{ | |||
bottom:335px; | |||
} | |||
.chartag1-wrapper{bottom: 335px;} | |||
.chartag2-wrapper{bottom: 385px;} | |||
.chartag1-wrapperpro{bottom: 335px;} | |||
.chartag2-wrapperpro{bottom: 385px;} | |||
.charname{bottom: 415px;} | |||
.charnamepro{bottom: 415px;} | |||
.charname-en{bottom: 480px;} | |||
.charname-enpro{bottom: 480px;} | |||
.star{bottom:515px;} | |||
.cv-wrapper{ | |||
left:auto; | |||
right:15px; | |||
width: 230px; | |||
bottom: 380px; | |||
background-color:#313131; | |||
} | |||
.cv-wrapperpro{ | |||
left:auto; | |||
right:15px; | |||
width: 230px; | |||
bottom: 380px; | |||
background-color:rgba(34,75,197,1); | |||
} | |||
.painter-wrapper{ | |||
left:auto; | |||
right:15px; | |||
width: 230px; | |||
bottom: 340px; | |||
background-color:#313131; | |||
} | |||
.painter-wrapperpro{ | |||
left:auto; | |||
right:15px; | |||
width: 230px; | |||
bottom: 340px; | |||
background-color:rgba(34,75,197,1); | |||
} | |||
.cv-content,.painter-content{ | |||
background-color: #313131; | |||
border-left: 1px solid black; | |||
left: 27px; | |||
width: 200px; | |||
} | |||
.cv-bg,.painter-bg{width:230px;} | |||
.bg,.skinbg{ | |||
height: 1024px; | |||
width: 576px; | |||
} | |||
.bgimg,.skinbgimg{ | |||
height:100%; | |||
width: 100%; | |||
} | |||
.skinbutton{ | |||
width:230px; | |||
} | |||
.skinname{ | |||
width: 150px; | |||
} | |||
.skinbutton-wrapper{ | |||
width: 230px; | |||
top:auto; | |||
bottom: 20px; | |||
height: 315px; | |||
} | } | ||
#skinbg{ | |||
height:1024px; | |||
width:576px; | |||
} | |||
.charclasspro{ | |||
bottom:335px; | |||
} | } | ||
} | |||
</style> | |||
<body><div id="rare" class="rare"><!--{$rare|escape:'javascript'}--></div> | |||
<div id="Limited" class="rare"><!--{$Limited|escape:'javascript'}--></div><div id="charinfo-container" class="charinfo-container" style="max-width:100%;overflow:hidden;"><div id="charinfo-scaler" style="position: relative; transform-origin: top left;"><div class="outpact anicss"> | |||
<div class="skinbutton-wrapper" id="skinbutton-wrapper" style="overflow:scroll"> | |||
<div class="skinbutton" id="skin1" onclick="changeskin1();" style="<!--{$skin1dis|escape:'javascript'}-->"> | |||
<div class="headcolor1"></div> | |||
<div class="charhead"><img src="<!--{$skinhead1|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect1" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname1"><!--{$skinname1|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin2" onclick="changeskin2();" style="<!--{$skin2dis|escape:'javascript'}-->"> | |||
<div class="headcolor2"></div> | |||
<div class="charhead"><img src="<!--{$skinhead2|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect2" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname2"><!--{$skinname2|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin3" onclick="changeskin3();" style="<!--{$skin3dis|escape:'javascript'}-->"> | |||
<div class="headcolor3"></div> | |||
<div class="charhead"><img src="<!--{$skinhead3|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect3" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname3"><!--{$skinname3|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin4" onclick="changeskin4();" style="<!--{$skin4dis|escape:'javascript'}-->"> | |||
<div class="headcolor4"></div> | |||
<div class="charhead"><img src="<!--{$skinhead4|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect4" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname4"><!--{$skinname4|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin5" onclick="changeskin5();" style="<!--{$skin5dis|escape:'javascript'}-->"> | |||
<div class="headcolor5"></div> | |||
<div class="charhead"><img src="<!--{$skinhead5|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect5" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname5"><!--{$skinname5|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin6" onclick="changeskin6();" style="<!--{$skin6dis|escape:'javascript'}-->"> | |||
<div class="headcolor6"></div> | |||
<div class="charhead"><img src="<!--{$skinhead6|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect6" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname6"><!--{$skinname6|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin7" onclick="changeskin7();" style="<!--{$skin7dis|escape:'javascript'}-->"> | |||
<div class="headcolor7"></div> | |||
<div class="charhead"><img src="<!--{$skinhead7|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect7" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname7"><!--{$skinname7|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin8" onclick="changeskin8();" style="<!--{$skin8dis|escape:'javascript'}-->"> | |||
<div class="headcolor8"></div> | |||
<div class="charhead"><img src="<!--{$skinhead8|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect8" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname8"><!--{$skinname8|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin9" onclick="changeskin9();" style="<!--{$skin9dis|escape:'javascript'}-->"> | |||
<div class="headcolor9"></div> | |||
<div class="charhead"><img src="<!--{$skinhead9|escape:'javascript'}-->" width="100px"></div> | |||
<div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect9" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname9"><!--{$skinname9|escape:'javascript'}--></div> | |||
</div> | |||
<div class="skinbutton" id="skin10" onclick="changeskin10();" style="<!--{$skin10dis|escape:'javascript'}-->"> | |||
<div class="headcolor10"></div> | |||
<div class="charhead"><img src="<!--{$skinhead10|escape:'javascript'}-->" width="100px"></div><!-- | |||
--><div class="headmask"></div><!-- | |||
--><div class="skinselect" id="skinselect10" style="width:65px;"><img src="//media.prts.wiki/2/20/Charinfo_SkinSelect1.png" width="100%"/></div><div class="skinname anicss" id="skinname10"><!--{$skinname10|escape:'javascript'}--></div> | |||
</div> | |||
</div> | |||
<div class="inpact anicss"> | |||
<div class="all anicss" id="all"> | |||
<div class="thidebtn<!--{$proclass|escape:'javascript'}-->" id="thidebtn" onclick="thideui();"> | |||
<div id="tclearui" class="tclearui"><img src="//media.prts.wiki/f/ff/Charinfo_收起.png" width="30px"></div> | |||
<div id="treturnui" class="tclearui" style="display:none;"><img src="//media.prts.wiki/4/4d/Charinfo_展开.png" width="30px"></div> | |||
</div> | |||
<div class="skinnoinfo<!--{$proclass|escape:'javascript'}--> anicss" id="skinnoinfo" style="display:none;"> | |||
<div class="skintitle<!--{$proclass|escape:'javascript'}-->">时装</div> | |||
<div class="skincontent<!--{$proclass|escape:'javascript'}-->">NO INFO/</div> | |||
</div> | |||
<!-- 普通背景 --> | |||
<!-- 皮肤button --> | |||
<div class="all-wrapper anicss"> | |||
<div class="all-wrap anicss"> | |||
<div class="rodesbg" style="<!--{$prodisR|escape:'javascript'}-->"></div> | |||
<div class="bg anicss" style="width:1024px;"><img class="anicss bgimg" src="<!--{$probg|escape:'javascript'}-->" width="100%" height="100%"/></div> | |||
<!-- 皮肤背景 --> | |||
<div class="skinbg" id="skinbg" style="display:none;width:1024px;transform: translateX(0px);transition: all 0.3s ease-in-out;"><img class="anicss skinbgimg" src="//media.prts.wiki/%E5%B9%B2%E5%91%98%E4%BF%A1%E6%81%AF_%E8%83%8C%E6%99%AF2.png" width="100%" height="100%"></div> | |||
<!-- 左上logo --> | |||
<div class="charlogo"> | |||
<div class="<!--{$rdslogo}-->" id="deflogo" style="<!--{$prodis|escape:'javascript'}-->"><img src="<!--{$deflogo|escape:'javascript'}-->" width="260px"></div> | |||
<div class="logo-wrapper"> | |||
<div class="logo-wrap"> | |||
<div id="skin1logo" class="logodis"><img src="<!--{$skin1logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin2logo" class="logodis"><img src="<!--{$skin2logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin3logo" class="logodis"><img src="<!--{$skin3logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin4logo" class="logodis"><img src="<!--{$skin4logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin5logo" class="logodis"><img src="<!--{$skin5logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin6logo" class="logodis"><img src="<!--{$skin6logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin7logo" class="logodis"><img src="<!--{$skin7logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin8logo" class="logodis"><img src="<!--{$skin8logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin9logo" class="logodis"><img src="<!--{$skin9logo|escape:'javascript'}-->" width="auto"></div> | |||
<div id="skin10logo" class="logodis"><img src="<!--{$skin10logo|escape:'javascript'}-->" width="auto"></div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 服装描述 --> | |||
<div class="explain-wrapper<!--{$proclass|escape:'javascript'}-->" id="explain-wrapper"> | |||
<div class="explain-title<!--{$proclass|escape:'javascript'}-->">描述</div> | |||
<div id="explain-stage0"> | |||
<div class="typewrapper"><span class="explain-type<!--{$proclass|escape:'javascript'}-->">默认服装</span></div><!-- | |||
--><div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainstage0|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-stage1" style="display:none"> | |||
<div class="typewrapper"><span class="explain-type<!--{$proclass|escape:'javascript'}-->">默认服装</span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainstage1|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-stage2" style="display:none"> | |||
<div class="typewrapper"><span class="explain-type<!--{$proclass|escape:'javascript'}-->">默认服装</span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainstage2|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-stage3" style="display:none"> | |||
<div class="typewrapper"><span class="explain-type<!--{$proclass|escape:'javascript'}-->">默认服装</span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainstage3|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin1" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin1type"><!--{$skin1series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin1|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin2" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin2type"><!--{$skin2series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin2|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin3" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin3type"><!--{$skin3series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin3|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
document.getElementById(" | <div id="explain-skin4" style="display:none"> | ||
<div class="typewrapper"><span class="explain-skin4type"><!--{$skin4series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin4|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin5" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin5type"><!--{$skin5series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin5|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin6" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin6type"><!--{$skin6series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin6|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin7" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin7type"><!--{$skin7series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin7|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin8" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin8type"><!--{$skin8series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin8|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin9" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin9type"><!--{$skin9series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin9|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
<div id="explain-skin10" style="display:none"> | |||
<div class="typewrapper"><span class="explain-skin10type"><!--{$skin10series|escape:'javascript'}--></span></div> | |||
<div class="explain-content<!--{$proclass|escape:'javascript'}-->"><!--{$explainskin10|escape:'javascript'|replace:'<br/>':'<br/>'}--></div> | |||
</div> | |||
</div> | |||
<!-- 特性 --> | |||
<div class="features-wrapper<!--{$proclass|escape:'javascript'}-->" id="features-wrapper"> | |||
<div class="features-title<!--{$proclass|escape:'javascript'}-->">特性</div><div class="features-content<!--{$proclass|escape:'javascript'}-->" id="features0" style="display:block"><!--{$features0|regex_replace:"/(script|<script)/":""}--></div><div class="features-content<!--{$proclass|escape:'javascript'}-->" id="features1"><!--{$features1|regex_replace:"/(script|<script)/":""}--></div><div class="features-content<!--{$proclass|escape:'javascript'}-->" id="features2"><!--{$features2|regex_replace:"/(script|<script)/":""}--></div><div class="features-content<!--{$proclass|escape:'javascript'}-->" id="features3"><!--{$features3|regex_replace:"/(script|<script)/":""}--></div></div> | |||
<!-- 切换动画矩形 --> | |||
<div class="anime-bg" id="anime-bg"></div> | |||
<div id="charinfoparticles" class="charinfoparticles"></div> | |||
<!-- 干员立绘 --> | |||
<div class="charimg-wrapper anicss" > | |||
<div id="charImgmove" onwheel=""> | |||
<div id="img" style="left: <!--{$stage0x|escape:'javascript'}-->px; top: <!--{$stage0y|escape:'javascript'}-->px;"> | |||
<div id="charimg" style="transform: scale(<!--{$stage0scale|escape:'javascript'}-->);"> | |||
<div id="img-stage0" class="charimg-stage" style="display:block"><img src="<!--{$charstage0|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-stage1" class="charimg-stage"><img src="<!--{$charstage1|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-stage2" class="charimg-stage"><img src="<!--{$charstage2|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-stage3" class="charimg-stage"><img src="<!--{$charstage3|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin1" class="charimg-skin"><img src="<!--{$charskin1|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin2" class="charimg-skin"><img src="<!--{$charskin2|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin3" class="charimg-skin"><img src="<!--{$charskin3|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin4" class="charimg-skin"><img src="<!--{$charskin4|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin5" class="charimg-skin"><img src="<!--{$charskin5|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin6" class="charimg-skin"><img src="<!--{$charskin6|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin7" class="charimg-skin"><img src="<!--{$charskin7|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin8" class="charimg-skin"><img src="<!--{$charskin8|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin9" class="charimg-skin"><img src="<!--{$charskin9|escape:'javascript'}-->" width="512px"/></div> | |||
<div id="img-skin10" class="charimg-skin"><img src="<!--{$charskin10|escape:'javascript'}-->" width="512px"/></div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div id="charin" class="charleft"> | |||
<!-- 职业logo --> | |||
<div class="charclass anicss" id="charclass" style="<!--{$prodis|escape:'javascript'}-->"><a href="<!--{$classlink|escape:'javascript'}-->"><img src="<!--{$classlogo|escape:'javascript'}-->" width="72px" style="border-radius:3px;"/></a></div> | |||
<div class="charclasspro anicss" id="charclasspro" style="<!--{$prodisR|escape:'javascript'}-->"><a href="<!--{$classlink|escape:'javascript'}-->"><img src="<!--{$classlogopro|escape:'javascript'}-->" width="75px"/></a></div> | |||
<!-- 干员tag1 --> | |||
<div class="chartag1-wrapper<!--{$proclass|escape:'javascript'}--> anicss" id="chartag1"> | |||
<div class="chartag1-content<!--{$proclass|escape:'javascript'}-->"><!--{$chartag1|escape:'javascript'}--></div> | |||
</div> | |||
<!-- 干员tag2 --> | |||
<div class="chartag2-wrapper<!--{$proclass|escape:'javascript'}--> anicss" id="chartag2"> | |||
<div class="chartag2-content<!--{$proclass|escape:'javascript'}-->"><a href="<!--{$chartag2link|escape:'javascript'}-->" title="<!--{$chartag2|escape:'javascript'}-->"><!--{$chartag2|escape:'javascript'}--></a></div> | |||
</div> | |||
<!-- 干员代号 --> | |||
<div class="charname<!--{$proclass|escape:'javascript'}--> anicss" id="charname"><!--{$charname|escape:'javascript'}--></div> | |||
<!-- 干员代号英文 --> | |||
<div class="charname-en<!--{$proclass|escape:'javascript'}--> anicss" id="charname-en"><!--{$charnameEN|escape:'javascript'}--></div> | |||
<!-- 稀有度 --> | |||
<div class="star anicss" id="star"><div class="starimg"><img src="<!--{$star|escape:'javascript'|escape:'javascript'}-->" height="38px"></div><div class="limited" id="limited">限定</div></div> | |||
<!-- 配音 --> | |||
<div class="cv-wrapper<!--{$proclass|escape:'javascript'}--> anicss" id="cv-wrapper"> | |||
<div class="cv-bg"> | |||
<div class="cv-logo"><img src="//media.prts.wiki/7/71/%E9%BA%A6%E5%85%8B%E9%A3%8E.png" width="18px"></div> | |||
<!--<div class="cv-title">配音</div>--> | |||
<div class="cv-content<!--{$proclass|escape:'javascript'}-->" id="cv-content"><a href="/w/%E9%85%8D%E9%9F%B3%E4%B8%80%E8%A7%88#<!--{$cvuri|escape:'javascript'}-->" title="配音一览#<!--{$cv|escape:'javascript'}-->"><!--{$cv|escape:'javascript'}--></a></div> | |||
</div> | |||
</div> | |||
<!-- 画师 --> | |||
<div class="painter-wrapper<!--{$proclass|escape:'javascript'}--> anicss" id="painter-wrapper"> | |||
<div class="painter-bg"> | |||
<div class="painter-logo"><img src="//media.prts.wiki/c/c8/V7D8mQ.png" width="18px"></div> | |||
<!--<div class="painter-title">画师</div>--> | |||
<div class="painter-content<!--{$proclass|escape:'javascript'}-->" id="painter-content"><a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$painteruri|escape:'javascript'}-->" title="画师一览#<!--{$painter|escape:'javascript'}-->"><!--{$painter|escape:'javascript'}--></a></div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 精英化button --> | |||
<div id="stageWrapper" class="stageWrapper" style="<!--{$prodis|escape:'javascript'}-->"> | |||
<div class="stage0-btn-wrapper" onclick="changeStage0();" id="stage0btn"> | |||
<div class="satge0-btn-bg"> | |||
<div class="stage0-btn-logo"><img src="//media.prts.wiki/c/c5/%E7%B2%BE%E8%8B%B1_0_%E5%A4%A7%E5%9B%BE.png" width="50px"></div> | |||
<div class="stage0-btn-logoafter"><img src="//media.prts.wiki/f/f4/%E7%B2%BE%E8%8B%B1_0_%E5%A4%A7%E5%9B%BE_%E8%93%9D.png" width="50px"></div> | |||
<div class="stage0-btn-content">初始</div> | |||
</div> | |||
</div> | |||
<div class="stage1-btn-wrapper" onclick="changeStage1();" id="stage1btn" style="<!--{$stage1dis|escape:'javascript'}-->"> | |||
<div class="satge1-btn-bg"> | |||
<div class="stage1-btn-logo"><img src="//media.prts.wiki/d/d7/%E7%B2%BE%E8%8B%B1_1_%E5%A4%A7%E5%9B%BE.png" width="50px"></div> | |||
<div class="stage1-btn-logoafter"><img src="//media.prts.wiki/c/ce/%E7%B2%BE%E8%8B%B1_1_%E5%A4%A7%E5%9B%BE_%E8%93%9D.png" width="50px"></div> | |||
<div class="stage1-btn-content">精英一</div> | |||
</div> | |||
</div> | |||
<div class="stage2-btn-wrapper" onclick="changeStage2();" id="stage2btn" style="<!--{$stage2dis|escape:'javascript'}-->"> | |||
<div class="satge2-btn-bg"> | |||
<div class="stage2-btn-logo"><img src="//media.prts.wiki/5/5d/%E7%B2%BE%E8%8B%B1_2_%E5%A4%A7%E5%9B%BE.png" width="50px"></div> | |||
<div class="stage2-btn-logoafter"><img src="//media.prts.wiki/9/9b/%E7%B2%BE%E8%8B%B1_2_%E5%A4%A7%E5%9B%BE_%E8%93%9D.png" width="50px"></div> | |||
<div class="stage2-btn-content">精英二</div> | |||
</div> | |||
</div> | |||
<div class="stage3-btn-wrapper" onclick="changeStage3();" style="display:none"> | |||
<div class="satge3-btn-bg"> | |||
<div class="stage3-btn-logo"><img src="//media.prts.wiki/2/2f/%E7%B2%BE%E8%8B%B1_3_%E5%A4%A7%E5%9B%BE.png" width="50px"></div> | |||
<div class="stage3-btn-logoafter"><img src="//media.prts.wiki/e/e2/%E7%B2%BE%E8%8B%B1_3_%E5%A4%A7%E5%9B%BE_%E8%93%9D.png" width="50px"></div> | |||
<div class="stage3-btn-content">精英三</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 看图按钮 --> | |||
<div id="clearbtn" class="clearbtn<!--{$proclass|escape:'javascript'}-->" onclick="clearimg();"><!-- | |||
--><div id="clearui"><img src="//media.prts.wiki/f/ff/Charinfo_收起.png" width="25px"></div><!-- | |||
--><div id="returnui"><img src="//media.prts.wiki/4/4d/Charinfo_展开.png" width="25px"></div> | |||
</div> | |||
<!-- 宽屏按钮 --> | |||
<div id="widebtn" class="widebtn<!--{$proclass|escape:'javascript'}-->" onclick="widescreen();"><!-- | |||
--><div id="wideOn"><img src="//media.prts.wiki/c/ce/Charinfo_宽屏.png" width="25px"></div><!-- | |||
--><div id="wideOff"><img src="//media.prts.wiki/b/bf/Charinfo_退出宽屏.png" width="25px"></div> | |||
</div> | |||
<!-- 全屏按钮 --> | |||
<div id="fullscbtn" class="fullscbtn<!--{$proclass|escape:'javascript'}-->" onclick="fullscreen();"><!-- | |||
--><div id="fullOn"><img src="//media.prts.wiki/d/d4/Charinfo_全屏.png" width="22px"></div><!-- | |||
--><div id="fullOff"><img src="//media.prts.wiki/b/b7/Charinfo_退出全屏.png" width="22px"></div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div></div></div> | |||
<script class="navigation-not-searchable"> | |||
var params = { | |||
zoomVal:<!--{$stage0scale|escape:'javascript'}-->, | |||
left: <!--{$stage0x|escape:'javascript'}-->, | |||
top: <!--{$stage0y|escape:'javascript'}-->, | |||
currentX: <!--{$stage0x|escape:'javascript'}-->, | |||
currentY: <!--{$stage0y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
function bbimg(o){ | |||
var o=o.getElementsByTagName("img")[0]; | |||
params.zoomVal+=(navigator.userAgent.indexOf('Firefox') != -1?-event.deltaY/30:event.deltaY*-0.001); | |||
//event.deltaY *(navigator.userAgent.indexOf('Firefox') != -1?-0.01:-0.001); | |||
//+=((event.wheelDelta)?event.wheelDelta/1200:-(event.detail||0)/30) | |||
//event.wheelDelta/1200; | |||
if (params.zoomVal >= 0.2) { | |||
document.getElementById("charimg").style.transform="scale("+params.zoomVal+")"; | |||
} else { | |||
params.zoomVal=0.2; | |||
document.getElementById("charimg").style.transform="scale("+params.zoomVal+")"; | |||
return false; | |||
} | } | ||
} | } | ||
var getCss = function(o,key){ | |||
function | return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; | ||
}; | |||
var startDrag = function(bar, target, callback){ | |||
if(getCss(target, "left") !== "auto"){ | |||
params.left = getCss(target, "left"); | |||
if( | |||
} | } | ||
if(getCss(target, "top") !== "auto"){ | |||
params.top = getCss(target, "top"); | |||
} | } | ||
bar.onmousedown = function(event){ | |||
params.flag = true; | |||
if(!event){ | |||
event = window.event; | |||
bar.onselectstart = function(){ | |||
return false; | |||
} | |||
} | |||
var e = event; | |||
params.currentX = e.clientX; | |||
params.currentY = e.clientY; | |||
}; | |||
document.onmouseup = function(){ | |||
params.flag = false; | |||
if(getCss(target, "left") !== "auto"){ | |||
params.left = getCss(target, "left"); | |||
} | |||
if(getCss(target, "top") !== "auto"){ | |||
params.top = getCss(target, "top"); | |||
} | |||
}; | |||
document.onmousemove = function(event){ | |||
var e = event ? event: window.event; | |||
} | if(params.flag){ | ||
var nowX = e.clientX, nowY = e.clientY; | |||
var disX = nowX - params.currentX, disY = nowY - params.currentY; | |||
target.style.left = parseInt(params.left) + disX+ "px"; | |||
target.style.top = parseInt(params.top) + disY+ "px"; | |||
if (typeof callback == "function") { | |||
callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY); | |||
} | |||
if (event.preventDefault) { | |||
event.preventDefault(); | |||
} | |||
return false; | |||
} | |||
} | } | ||
}; | |||
startDrag(document.getElementById("img"),document.getElementById("img")) | |||
document.getElementById(" | window.onload=function(){ | ||
document.getElementById(" | setskinlogo(); | ||
setlimited(); | |||
} | |||
function charinfoScale() { | |||
function c() { | |||
var containerWidth = $('#charinfo-container').width(); | |||
if (containerWidth < 1024) { | |||
$('#charinfo-scaler').css({ | |||
'transform': 'scale(' + (containerWidth / 1024) + ')', | |||
'left': '0' | |||
}); | |||
$('#charinfo-container').css('height', (576 * containerWidth / 1024) + 'px'); | |||
} | |||
} | |||
var e = document.getElementById("content-collapsible-block-0"); | |||
if (e.attributes["aria-expanded"].value === "true") { | |||
c(); | |||
} else if (e.attributes["aria-expanded"].value === "false") { | |||
var observer = new MutationObserver((m) => { | |||
if (m[0].oldValue === "false" && m[0].target.attributes["aria-expanded"].value === "true") { | |||
c(); | |||
observer.disconnect(); | |||
observer = null; | |||
} | |||
}); | |||
observer.observe(document.getElementById('content-collapsible-block-0'), { attributes: true, childList: false, subtree: false, attributeFilter: ["aria-expanded"], attributeOldValue: true }); | |||
} | |||
} | |||
function setstagebtn(){ | |||
if(document.getElementById("rare").innerHTML<3){ | |||
document.getElementById("stage2btn").style.display="none"; | |||
} | |||
if(document.getElementById("rare").innerHTML<2){ | |||
document.getElementById("stage1btn").style.display="none"; | |||
} | |||
} | |||
function setlimited(){ | |||
if(document.getElementById("Limited").innerHTML==1){ | |||
document.getElementById("limited").style.display="inline-block"; | |||
} | } | ||
} | } | ||
function setskinbtn(){ | |||
function | if(document.getElementById("skinname1").innerHTML!=""){ | ||
document.getElementById("skin1").style.display="block"; | |||
} | |||
if(document.getElementById("skinname2").innerHTML!=""){ | |||
document.getElementById("skin2").style.display="block"; | |||
document.getElementById(" | |||
document.getElementById(" | |||
} | } | ||
if(document.getElementById("skinname3").innerHTML!=""){ | |||
document.getElementById("skin3").style.display="block"; | |||
document.getElementById(" | |||
} | } | ||
if(document.getElementById("skinname4").innerHTML!=""){ | |||
document.getElementById("skin4").style.display="block"; | |||
document.getElementById(" | |||
} | } | ||
if(document.getElementById("skinname5").innerHTML!=""){ | |||
document.getElementById("skin5").style.display="block"; | |||
document.getElementById(" | |||
} | } | ||
if(document.getElementById("skinname6").innerHTML!=""){ | |||
document.getElementById("skin6").style.display="block"; | |||
} | |||
if(document.getElementById("skinname7").innerHTML!=""){ | |||
document.getElementById("skin7").style.display="block"; | |||
document.getElementById(" | |||
document.getElementById(" | |||
} | } | ||
if(document.getElementById("skinname8").innerHTML!=""){ | |||
document.getElementById("skin8").style.display="block"; | |||
document.getElementById(" | |||
} | } | ||
} | if(document.getElementById("skinname9").innerHTML!=""){ | ||
document.getElementById("skin9").style.display="block"; | |||
function clearexplain(){ | } | ||
document.getElementById("explain-stage0").style.display="none"; | if(document.getElementById("skinname10").innerHTML!=""){ | ||
document.getElementById("explain-stage1").style.display="none"; | document.getElementById("skin10").style.display="block"; | ||
document.getElementById("explain-stage2").style.display="none"; | } | ||
document.getElementById("explain-stage3").style.display="none"; | } | ||
document.getElementById("explain-skin1").style.display="none"; | |||
function setskinlogo(){ | |||
if(document.getElementById("skin1logo").innerHTML==""){ | |||
document.getElementById("skin1logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin2logo").innerHTML==""){ | |||
document.getElementById("skin2logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin3logo").innerHTML==""){ | |||
document.getElementById("skin3logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin4logo").innerHTML==""){ | |||
document.getElementById("skin4logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin5logo").innerHTML==""){ | |||
document.getElementById("skin5logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin6logo").innerHTML==""){ | |||
document.getElementById("skin6logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin7logo").innerHTML==""){ | |||
document.getElementById("skin7logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin8logo").innerHTML==""){ | |||
document.getElementById("skin8logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin9logo").innerHTML==""){ | |||
document.getElementById("skin9logo").style.display="none"; | |||
} | |||
if(document.getElementById("skin10logo").innerHTML==""){ | |||
document.getElementById("skin10logo").style.display="none"; | |||
} | |||
} | |||
function ctrlscale(){ | |||
return bbimg(this); | |||
} | |||
function clearimg(){ | |||
var dis=document.getElementById("clearui").style.display; | |||
if(dis=="none"){ | |||
document.getElementById("stage0btn").style.borderRadius="0px"; | |||
document.getElementById("stage0btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage0btn").style.width="110px"; | |||
document.getElementById("stage0btn").style.left="15px"; | |||
document.getElementById("stage1btn").style.borderRadius="0px"; | |||
document.getElementById("stage1btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage1btn").style.width="120px"; | |||
document.getElementById("stage1btn").style.top="10px"; | |||
document.getElementById("stage1btn").style.left="130px"; | |||
document.getElementById("stage2btn").style.borderRadius="0px"; | |||
document.getElementById("stage2btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage2btn").style.width="120px"; | |||
document.getElementById("stage2btn").style.top="10px"; | |||
document.getElementById("stage2btn").style.left="255px"; | |||
document.getElementById("charclass").style.transform="translateY(0px)"; | |||
document.getElementById("charclasspro").style.transform="translateY(0px)"; | |||
document.getElementById("chartag1").style.transform="translateY(0px)"; | |||
document.getElementById("chartag2").style.transform="translateY(0px)"; | |||
document.getElementById("charname").style.transform="translateX(0px)"; | |||
document.getElementById("charname-en").style.transform="translateX(0px)"; | |||
document.getElementById("star").style.transform="translateX(0px)"; | |||
document.getElementById("cv-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("painter-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("explain-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("features-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("returnui").style.display="none"; | |||
document.getElementById("clearui").style.display="block"; | |||
document.getElementById("clearbtn").style.transform="translateX(0px)"; | |||
document.getElementById("widebtn").style.transform="translateX(0px)"; | |||
document.getElementById("fullscbtn").style.transform="translateX(0px)"; | |||
document.getElementById("charImgmove").removeEventListener("wheel",ctrlscale); | |||
document.getElementById("charname-en").style.opacity="1"; | |||
document.getElementById("charname").style.opacity="1"; | |||
document.getElementById("skinname1").style.opacity="1"; | |||
document.getElementById("skinname2").style.opacity="1"; | |||
document.getElementById("skinname3").style.opacity="1"; | |||
document.getElementById("skinname4").style.opacity="1"; | |||
document.getElementById("skinname5").style.opacity="1"; | |||
document.getElementById("skinname6").style.opacity="1"; | |||
document.getElementById("skinname7").style.opacity="1"; | |||
document.getElementById("skinname8").style.opacity="1"; | |||
document.getElementById("skinname9").style.opacity="1"; | |||
document.getElementById("skinname10").style.opacity="1"; | |||
document.getElementById("skinselect1").style.width="65px"; | |||
document.getElementById("skinselect2").style.width="65px"; | |||
document.getElementById("skinselect3").style.width="65px"; | |||
document.getElementById("skinselect4").style.width="65px"; | |||
document.getElementById("skinselect5").style.width="65px"; | |||
document.getElementById("skinselect6").style.width="65px"; | |||
document.getElementById("skinselect7").style.width="65px"; | |||
document.getElementById("skinselect8").style.width="65px"; | |||
document.getElementById("skinselect9").style.width="65px"; | |||
document.getElementById("skinselect10").style.width="65px"; | |||
document.getElementById("skinselect1").style.bottom="-10px"; | |||
document.getElementById("skinselect2").style.bottom="-10px"; | |||
document.getElementById("skinselect3").style.bottom="-10px"; | |||
document.getElementById("skinselect4").style.bottom="-10px"; | |||
document.getElementById("skinselect5").style.bottom="-10px"; | |||
document.getElementById("skinselect6").style.bottom="-10px"; | |||
document.getElementById("skinselect7").style.bottom="-10px"; | |||
document.getElementById("skinselect8").style.bottom="-10px"; | |||
document.getElementById("skinselect9").style.bottom="-10px"; | |||
document.getElementById("skinselect10").style.bottom="-10px"; | |||
document.getElementById("skinselect1").style.opacity=".4"; | |||
document.getElementById("skinselect2").style.opacity=".4"; | |||
document.getElementById("skinselect3").style.opacity=".4"; | |||
document.getElementById("skinselect4").style.opacity=".4"; | |||
document.getElementById("skinselect5").style.opacity=".4"; | |||
document.getElementById("skinselect6").style.opacity=".4"; | |||
document.getElementById("skinselect7").style.opacity=".4"; | |||
document.getElementById("skinselect8").style.opacity=".4"; | |||
document.getElementById("skinselect9").style.opacity=".4"; | |||
document.getElementById("skinselect10").style.opacity=".4"; | |||
document.getElementById("skin1").style.width="300px"; | |||
document.getElementById("skin2").style.width="300px"; | |||
document.getElementById("skin3").style.width="300px"; | |||
document.getElementById("skin4").style.width="300px"; | |||
document.getElementById("skin5").style.width="300px"; | |||
document.getElementById("skin6").style.width="300px"; | |||
document.getElementById("skin7").style.width="300px"; | |||
document.getElementById("skin8").style.width="300px"; | |||
document.getElementById("skin9").style.width="300px"; | |||
document.getElementById("skin10").style.width="300px"; | |||
document.getElementById("skinbutton-wrapper").style.right="15px"; | |||
if(document.getElementById("widebtn").style.display=="none"){}else{$(all).unbind('mousewheel');} | |||
} | |||
else{ | |||
document.getElementById("stage0btn").style.borderRadius="5px"; | |||
document.getElementById("stage0btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage0btn").style.width="60px"; | |||
document.getElementById("stage0btn").style.left="10px"; | |||
document.getElementById("stage1btn").style.borderRadius="5px"; | |||
document.getElementById("stage1btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage1btn").style.width="60px"; | |||
document.getElementById("stage1btn").style.top="55px"; | |||
document.getElementById("stage1btn").style.left="10px"; | |||
document.getElementById("stage2btn").style.borderRadius="5px"; | |||
document.getElementById("stage2btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage2btn").style.width="60px"; | |||
document.getElementById("stage2btn").style.top="100px"; | |||
document.getElementById("stage2btn").style.left="10px"; | |||
document.getElementById("charclass").style.transform="translateY(100px)"; | |||
document.getElementById("charclasspro").style.transform="translateY(100px)"; | |||
document.getElementById("chartag1").style.transform="translateY(100px)"; | |||
document.getElementById("chartag2").style.transform="translateY(100px)"; | |||
document.getElementById("charname").style.transform="translateX(-500px)"; | |||
document.getElementById("charname-en").style.transform="translateX(-200px)"; | |||
document.getElementById("star").style.transform="translateX(-250px)"; | |||
document.getElementById("cv-wrapper").style.transform="translateX(-310px)"; | |||
document.getElementById("painter-wrapper").style.transform="translateX(-310px)"; | |||
document.getElementById("explain-wrapper").style.transform="translateX(400px)"; | |||
document.getElementById("features-wrapper").style.transform="translateX(400px)"; | |||
document.getElementById("returnui").style.display="block"; | |||
document.getElementById("clearui").style.display="none"; | |||
document.getElementById("clearbtn").style.transform="translateX(305px)"; | |||
document.getElementById("widebtn").style.transform="translateX(305px)"; | |||
document.getElementById("fullscbtn").style.transform="translateX(305px)"; | |||
document.getElementById("charImgmove").addEventListener("wheel",ctrlscale); | |||
if(document.getElementById("widebtn").style.display=="none"){}else{$(all).bind('mousewheel', function(event, delta) {return false;});} | |||
document.getElementById("charname-en").style.opacity="0"; | |||
document.getElementById("charname").style.opacity="0"; | |||
document.getElementById("skinname1").style.opacity="0"; | |||
document.getElementById("skinname2").style.opacity="0"; | |||
document.getElementById("skinname3").style.opacity="0"; | |||
document.getElementById("skinname4").style.opacity="0"; | |||
document.getElementById("skinname5").style.opacity="0"; | |||
document.getElementById("skinname6").style.opacity="0"; | |||
document.getElementById("skinname7").style.opacity="0"; | |||
document.getElementById("skinname8").style.opacity="0"; | |||
document.getElementById("skinname9").style.opacity="0"; | |||
document.getElementById("skinname10").style.opacity="0"; | |||
document.getElementById("skinselect1").style.width="50px"; | |||
document.getElementById("skinselect2").style.width="50px"; | |||
document.getElementById("skinselect3").style.width="50px"; | |||
document.getElementById("skinselect4").style.width="50px"; | |||
document.getElementById("skinselect5").style.width="50px"; | |||
document.getElementById("skinselect6").style.width="50px"; | |||
document.getElementById("skinselect7").style.width="50px"; | |||
document.getElementById("skinselect8").style.width="50px"; | |||
document.getElementById("skinselect9").style.width="50px"; | |||
document.getElementById("skinselect10").style.width="50px"; | |||
document.getElementById("skinselect1").style.opacity="1"; | |||
document.getElementById("skinselect2").style.opacity="1"; | |||
document.getElementById("skinselect3").style.opacity="1"; | |||
document.getElementById("skinselect4").style.opacity="1"; | |||
document.getElementById("skinselect5").style.opacity="1"; | |||
document.getElementById("skinselect6").style.opacity="1"; | |||
document.getElementById("skinselect7").style.opacity="1"; | |||
document.getElementById("skinselect8").style.opacity="1"; | |||
document.getElementById("skinselect9").style.opacity="1"; | |||
document.getElementById("skinselect10").style.opacity="1"; | |||
document.getElementById("skinselect1").style.bottom="-5px"; | |||
document.getElementById("skinselect2").style.bottom="-5px"; | |||
document.getElementById("skinselect3").style.bottom="-5px"; | |||
document.getElementById("skinselect4").style.bottom="-5px"; | |||
document.getElementById("skinselect5").style.bottom="-5px"; | |||
document.getElementById("skinselect6").style.bottom="-5px"; | |||
document.getElementById("skinselect7").style.bottom="-5px"; | |||
document.getElementById("skinselect8").style.bottom="-5px"; | |||
document.getElementById("skinselect9").style.bottom="-5px"; | |||
document.getElementById("skinselect10").style.bottom="-5px"; | |||
document.getElementById("skin1").style.width="110px"; | |||
document.getElementById("skin2").style.width="110px"; | |||
document.getElementById("skin3").style.width="110px"; | |||
document.getElementById("skin4").style.width="110px"; | |||
document.getElementById("skin5").style.width="110px"; | |||
document.getElementById("skin6").style.width="110px"; | |||
document.getElementById("skin7").style.width="110px"; | |||
document.getElementById("skin8").style.width="110px"; | |||
document.getElementById("skin9").style.width="110px"; | |||
document.getElementById("skin10").style.width="110px"; | |||
document.getElementById("skinbutton-wrapper").style.right="-175px"; | |||
} | |||
} | |||
function thideui(){ | |||
var dis=document.getElementById("tclearui").style.display; | |||
if(dis=="none"){ | |||
document.getElementById("stage0btn").style.borderRadius="0px"; | |||
document.getElementById("stage0btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage0btn").style.width="110px"; | |||
document.getElementById("stage0btn").style.left="15px"; | |||
document.getElementById("stage1btn").style.borderRadius="0px"; | |||
document.getElementById("stage1btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage1btn").style.width="120px"; | |||
document.getElementById("stage1btn").style.top="10px"; | |||
document.getElementById("stage1btn").style.left="130px"; | |||
document.getElementById("stage2btn").style.borderRadius="0px"; | |||
document.getElementById("stage2btn").style.backgroundColor="rgba(0,0,0,.8)"; | |||
document.getElementById("stage2btn").style.width="120px"; | |||
document.getElementById("stage2btn").style.top="10px"; | |||
document.getElementById("stage2btn").style.left="255px"; | |||
document.getElementById("charclass").style.transform="translateX(0px)"; | |||
document.getElementById("charclasspro").style.transform="translateX(0px)"; | |||
document.getElementById("chartag1").style.transform="translateX(0px)"; | |||
document.getElementById("chartag2").style.transform="translateX(0px)"; | |||
document.getElementById("charname").style.transform="translateX(0px)"; | |||
document.getElementById("charname-en").style.transform="translateX(0px)"; | |||
document.getElementById("star").style.transform="translateX(0px)"; | |||
document.getElementById("cv-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("painter-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("explain-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("features-wrapper").style.transform="translateX(0px)"; | |||
document.getElementById("treturnui").style.display="none"; | |||
document.getElementById("tclearui").style.display="block"; | |||
document.getElementById("skinname1").style.opacity="1"; | |||
document.getElementById("skinname2").style.opacity="1"; | |||
document.getElementById("skinname3").style.opacity="1"; | |||
document.getElementById("skinname4").style.opacity="1"; | |||
document.getElementById("skinname5").style.opacity="1"; | |||
document.getElementById("skinname6").style.opacity="1"; | |||
document.getElementById("skinname7").style.opacity="1"; | |||
document.getElementById("skinname8").style.opacity="1"; | |||
document.getElementById("skinname9").style.opacity="1"; | |||
document.getElementById("skinname10").style.opacity="1"; | |||
document.getElementById("skinselect1").style.width="65px"; | |||
document.getElementById("skinselect2").style.width="65px"; | |||
document.getElementById("skinselect3").style.width="65px"; | |||
document.getElementById("skinselect4").style.width="65px"; | |||
document.getElementById("skinselect5").style.width="65px"; | |||
document.getElementById("skinselect6").style.width="65px"; | |||
document.getElementById("skinselect7").style.width="65px"; | |||
document.getElementById("skinselect8").style.width="65px"; | |||
document.getElementById("skinselect9").style.width="65px"; | |||
document.getElementById("skinselect10").style.width="65px"; | |||
document.getElementById("skinselect1").style.bottom="-10px"; | |||
document.getElementById("skinselect2").style.bottom="-10px"; | |||
document.getElementById("skinselect3").style.bottom="-10px"; | |||
document.getElementById("skinselect4").style.bottom="-10px"; | |||
document.getElementById("skinselect5").style.bottom="-10px"; | |||
document.getElementById("skinselect6").style.bottom="-10px"; | |||
document.getElementById("skinselect7").style.bottom="-10px"; | |||
document.getElementById("skinselect8").style.bottom="-10px"; | |||
document.getElementById("skinselect9").style.bottom="-10px"; | |||
document.getElementById("skinselect10").style.bottom="-10px"; | |||
document.getElementById("skinselect1").style.opacity=".4"; | |||
document.getElementById("skinselect2").style.opacity=".4"; | |||
document.getElementById("skinselect3").style.opacity=".4"; | |||
document.getElementById("skinselect4").style.opacity=".4"; | |||
document.getElementById("skinselect5").style.opacity=".4"; | |||
document.getElementById("skinselect6").style.opacity=".4"; | |||
document.getElementById("skinselect7").style.opacity=".4"; | |||
document.getElementById("skinselect8").style.opacity=".4"; | |||
document.getElementById("skinselect9").style.opacity=".4"; | |||
document.getElementById("skinselect10").style.opacity=".4"; | |||
document.getElementById("skin1").style.width="230px"; | |||
document.getElementById("skin2").style.width="230px"; | |||
document.getElementById("skin3").style.width="230px"; | |||
document.getElementById("skin4").style.width="230px"; | |||
document.getElementById("skin5").style.width="230px"; | |||
document.getElementById("skin6").style.width="230px"; | |||
document.getElementById("skin7").style.width="230px"; | |||
document.getElementById("skin8").style.width="230px"; | |||
document.getElementById("skin9").style.width="230px"; | |||
document.getElementById("skin10").style.width="230px"; | |||
document.getElementById("skinbutton-wrapper").style.right="15px"; | |||
document.getElementById("skinbutton-wrapper").style.height="315px"; | |||
document.getElementById("skinnoinfo").style.right="15px"; | |||
document.getElementById("charImgmove").removeEventListener("wheel",ctrlscale); | |||
$(all).unbind('mousewheel'); | |||
} | |||
else{ | |||
document.getElementById("stage0btn").style.borderRadius="5px"; | |||
document.getElementById("stage0btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage0btn").style.width="60px"; | |||
document.getElementById("stage0btn").style.left="10px"; | |||
document.getElementById("stage1btn").style.borderRadius="5px"; | |||
document.getElementById("stage1btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage1btn").style.width="60px"; | |||
document.getElementById("stage1btn").style.top="55px"; | |||
document.getElementById("stage1btn").style.left="10px"; | |||
document.getElementById("stage2btn").style.borderRadius="5px"; | |||
document.getElementById("stage2btn").style.backgroundColor="rgba(0,0,0,.47)"; | |||
document.getElementById("stage2btn").style.width="60px"; | |||
document.getElementById("stage2btn").style.top="100px"; | |||
document.getElementById("stage2btn").style.left="10px"; | |||
document.getElementById("charclass").style.transform="translateX(-100px)"; | |||
document.getElementById("charclasspro").style.transform="translateX(-100px)"; | |||
document.getElementById("chartag1").style.transform="translateX(-350px)"; | |||
document.getElementById("chartag2").style.transform="translateX(-350px)"; | |||
document.getElementById("charname").style.transform="translateX(-500px)"; | |||
document.getElementById("charname-en").style.transform="translateX(-200px)"; | |||
document.getElementById("star").style.transform="translateX(-250px)"; | |||
document.getElementById("cv-wrapper").style.transform="translateX(250px)"; | |||
document.getElementById("painter-wrapper").style.transform="translateX(250px)"; | |||
document.getElementById("explain-wrapper").style.transform="translateX(-400px)"; | |||
document.getElementById("features-wrapper").style.transform="translateX(-400px)"; | |||
document.getElementById("treturnui").style.display="block"; | |||
document.getElementById("tclearui").style.display="none"; | |||
document.getElementById("skinname1").style.opacity="0"; | |||
document.getElementById("skinname2").style.opacity="0"; | |||
document.getElementById("skinname3").style.opacity="0"; | |||
document.getElementById("skinname4").style.opacity="0"; | |||
document.getElementById("skinname5").style.opacity="0"; | |||
document.getElementById("skinname6").style.opacity="0"; | |||
document.getElementById("skinname7").style.opacity="0"; | |||
document.getElementById("skinname8").style.opacity="0"; | |||
document.getElementById("skinname9").style.opacity="0"; | |||
document.getElementById("skinname10").style.opacity="0"; | |||
document.getElementById("skinselect1").style.width="50px"; | |||
document.getElementById("skinselect2").style.width="50px"; | |||
document.getElementById("skinselect3").style.width="50px"; | |||
document.getElementById("skinselect4").style.width="50px"; | |||
document.getElementById("skinselect5").style.width="50px"; | |||
document.getElementById("skinselect6").style.width="50px"; | |||
document.getElementById("skinselect7").style.width="50px"; | |||
document.getElementById("skinselect8").style.width="50px"; | |||
document.getElementById("skinselect9").style.width="50px"; | |||
document.getElementById("skinselect10").style.width="50px"; | |||
document.getElementById("skinselect1").style.opacity="1"; | |||
document.getElementById("skinselect2").style.opacity="1"; | |||
document.getElementById("skinselect3").style.opacity="1"; | |||
document.getElementById("skinselect4").style.opacity="1"; | |||
document.getElementById("skinselect5").style.opacity="1"; | |||
document.getElementById("skinselect6").style.opacity="1"; | |||
document.getElementById("skinselect7").style.opacity="1"; | |||
document.getElementById("skinselect8").style.opacity="1"; | |||
document.getElementById("skinselect9").style.opacity="1"; | |||
document.getElementById("skinselect10").style.opacity="1"; | |||
document.getElementById("skinselect1").style.bottom="-5px"; | |||
document.getElementById("skinselect2").style.bottom="-5px"; | |||
document.getElementById("skinselect3").style.bottom="-5px"; | |||
document.getElementById("skinselect4").style.bottom="-5px"; | |||
document.getElementById("skinselect5").style.bottom="-5px"; | |||
document.getElementById("skinselect6").style.bottom="-5px"; | |||
document.getElementById("skinselect7").style.bottom="-5px"; | |||
document.getElementById("skinselect8").style.bottom="-5px"; | |||
document.getElementById("skinselect9").style.bottom="-5px"; | |||
document.getElementById("skinselect10").style.bottom="-5px"; | |||
document.getElementById("skin1").style.width="110px"; | |||
document.getElementById("skin2").style.width="110px"; | |||
document.getElementById("skin3").style.width="110px"; | |||
document.getElementById("skin4").style.width="110px"; | |||
document.getElementById("skin5").style.width="110px"; | |||
document.getElementById("skin6").style.width="110px"; | |||
document.getElementById("skin7").style.width="110px"; | |||
document.getElementById("skin8").style.width="110px"; | |||
document.getElementById("skin9").style.width="110px"; | |||
document.getElementById("skin10").style.width="110px"; | |||
document.getElementById("skinbutton-wrapper").style.right="-105px"; | |||
document.getElementById("skinbutton-wrapper").style.height="auto"; | |||
document.getElementById("skinnoinfo").style.right="-300px"; | |||
document.getElementById("charImgmove").addEventListener("wheel",ctrlscale); | |||
$(all).bind('mousewheel', function(event, delta) {return false;}); | |||
} | |||
} | |||
function widescreen(){ | |||
var scwidth=document.getElementById("all").style.width; | |||
if(scwidth!="1200px"){ | |||
document.getElementsByClassName("outpact")[0].style.width="1200px"; | |||
document.getElementsByClassName("inpact")[0].style.width="1200px"; | |||
document.getElementsByClassName("all")[0].style.width="1200px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.width="1200px"; | |||
document.getElementsByClassName("all-wrap")[0].style.width="1200px"; | |||
document.getElementsByClassName("bg")[0].style.width="1200px"; | |||
document.getElementById("skinbg").style.width="1200px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.left="300px"; | |||
document.getElementById("wideOn").style.display="none"; | |||
document.getElementById("wideOff").style.display="block"; | |||
} | |||
else{ | |||
document.getElementsByClassName("outpact")[0].style.width="1024px"; | |||
document.getElementsByClassName("inpact")[0].style.width="1024px"; | |||
document.getElementsByClassName("all")[0].style.width="1024px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.width="1024px"; | |||
document.getElementsByClassName("all-wrap")[0].style.width="1024px"; | |||
document.getElementsByClassName("bg")[0].style.width="1024px"; | |||
document.getElementById("skinbg").style.width="1024px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.left="200px"; | |||
document.getElementById("wideOn").style.display="block"; | |||
document.getElementById("wideOff").style.display="none"; | |||
} | |||
} | |||
function clearstage(){ | |||
document.getElementById("img-stage0").style.display="none"; | |||
document.getElementById("img-stage1").style.display="none"; | |||
document.getElementById("img-stage2").style.display="none"; | |||
document.getElementById("img-stage3").style.display="none"; | |||
} | |||
function clearskin(){ | |||
document.getElementById("img-skin1").style.display="none"; | |||
document.getElementById("img-skin2").style.display="none"; | |||
document.getElementById("img-skin3").style.display="none"; | |||
document.getElementById("img-skin4").style.display="none"; | |||
document.getElementById("img-skin5").style.display="none"; | |||
document.getElementById("img-skin6").style.display="none"; | |||
document.getElementById("img-skin7").style.display="none"; | |||
document.getElementById("img-skin8").style.display="none"; | |||
document.getElementById("img-skin9").style.display="none"; | |||
document.getElementById("img-skin10").style.display="none"; | |||
} | |||
function resetlocation(){ | |||
document.getElementById("charimg").style.transform="scale(1)"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
zoomVal:1, | |||
left: 0, | |||
top: 0, | |||
currentX: 0, | |||
currentY: 0, | |||
flag: false | |||
}; | |||
} | |||
function clearfeatures(){ | |||
document.getElementById("features0").style.display="none"; | |||
document.getElementById("features1").style.display="none"; | |||
document.getElementById("features2").style.display="none"; | |||
document.getElementById("features3").style.display="none"; | |||
} | |||
function clearxy(){ | |||
document.getElementById("charimg").transform="scale(1)"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
} | |||
function changeStage0(){ | |||
resetlocation(); | |||
clearexplain(); | |||
clearfeatures(); | |||
clearskinselect(); | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$painteruri|escape:'javascript'}-->" title="画师一览#<!--{$painter|escape:'javascript'}-->"><!--{$painter|escape:'javascript'}--></a>'; | |||
var dis=document.getElementById("skinbg").style.display; | |||
if(dis=="none"){ | |||
clearstage(); | |||
document.getElementById("img-stage0").style.display="block"; | |||
document.getElementById("explain-stage0").style.display="block"; | |||
document.getElementById("features0").style.display="block"; | |||
} | |||
else{ | |||
clearskin(); | |||
clearlogo(); | |||
document.getElementById("img-stage0").style.display="block"; | |||
document.getElementById("explain-stage0").style.display="block"; | |||
document.getElementById("features0").style.display="block"; | |||
document.getElementById("skinbg").style.display="none"; | |||
document.getElementById("deflogo").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
document.getElementById("skinbg").className="skinbg-out"; | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$stage0scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$stage0x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$stage0y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$stage0scale|escape:'javascript'}-->, | |||
left: <!--{$stage0x|escape:'javascript'}-->, | |||
top: <!--{$stage0y|escape:'javascript'}-->, | |||
currentX: <!--{$stage0x|escape:'javascript'}-->, | |||
currentY: <!--{$stage0y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeStage1(){ | |||
resetlocation(); | |||
clearexplain(); | |||
clearfeatures(); | |||
clearskinselect(); | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$painteruri|escape:'javascript'}-->" title="画师一览#<!--{$painter|escape:'javascript'}-->"><!--{$painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-stage1").style.display="block"; | |||
document.getElementById("explain-stage1").style.display="block"; | |||
document.getElementById("features1").style.display="block"; | |||
} | |||
else{ | |||
clearskin(); | |||
clearlogo(); | |||
document.getElementById("img-stage1").style.display="block"; | |||
document.getElementById("explain-stage1").style.display="block"; | |||
document.getElementById("skinbg").style.display="none"; | |||
document.getElementById("deflogo").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
document.getElementById("skinbg").className="skinbg-out"; | |||
document.getElementById("features1").style.display="block"; | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$stage1scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$stage1x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$stage1y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$stage1scale|escape:'javascript'}-->, | |||
left: <!--{$stage1x|escape:'javascript'}-->, | |||
top: <!--{$stage1y|escape:'javascript'}-->, | |||
currentX: <!--{$stage1x|escape:'javascript'}-->, | |||
currentY: <!--{$stage1y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeStage2(){ | |||
resetlocation(); | |||
clearexplain(); | |||
clearfeatures(); | |||
clearskinselect(); | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$painteruri|escape:'javascript'}-->" title="画师一览#<!--{$painter|escape:'javascript'}-->"><!--{$painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-stage2").style.display="block"; | |||
document.getElementById("explain-stage2").style.display="block"; | |||
document.getElementById("features2").style.display="block"; | |||
} | |||
else{ | |||
clearskin(); | |||
clearlogo(); | |||
document.getElementById("img-stage2").style.display="block"; | |||
document.getElementById("explain-stage2").style.display="block"; | |||
document.getElementById("skinbg").style.display="none"; | |||
document.getElementById("deflogo").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
document.getElementById("skinbg").className="skinbg-out"; | |||
document.getElementById("features2").style.display="block"; | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$stage2scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$stage2x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$stage2y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$stage2scale|escape:'javascript'}-->, | |||
left: <!--{$stage2x|escape:'javascript'}-->, | |||
top: <!--{$stage2y|escape:'javascript'}-->, | |||
currentX: <!--{$stage2x|escape:'javascript'}-->, | |||
currentY: <!--{$stage2y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function clearlogo(){ | |||
document.getElementById("deflogo").style.display="none"; | |||
document.getElementById("skin1logo").style.display="none"; | |||
document.getElementById("skin2logo").style.display="none"; | |||
document.getElementById("skin3logo").style.display="none"; | |||
document.getElementById("skin4logo").style.display="none"; | |||
document.getElementById("skin5logo").style.display="none"; | |||
document.getElementById("skin6logo").style.display="none"; | |||
document.getElementById("skin7logo").style.display="none"; | |||
document.getElementById("skin8logo").style.display="none"; | |||
document.getElementById("skin9logo").style.display="none"; | |||
document.getElementById("skin10logo").style.display="none"; | |||
} | |||
function clearskinselect(){ | |||
document.getElementById("skinselect1").style.display="none"; | |||
document.getElementById("skinselect2").style.display="none"; | |||
document.getElementById("skinselect3").style.display="none"; | |||
document.getElementById("skinselect4").style.display="none"; | |||
document.getElementById("skinselect5").style.display="none"; | |||
document.getElementById("skinselect6").style.display="none"; | |||
document.getElementById("skinselect7").style.display="none"; | |||
document.getElementById("skinselect8").style.display="none"; | |||
document.getElementById("skinselect9").style.display="none"; | |||
document.getElementById("skinselect10").style.display="none"; | |||
} | |||
function changeskin1(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect1").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin1logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin1painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin1painter|escape:'javascript'}-->"><!--{$skin1painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin1").style.display="block"; | |||
document.getElementById("explain-skin1").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color1)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin1").style.display="block"; | |||
document.getElementById("explain-skin1").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color1)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin1scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin1x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin1y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin1scale|escape:'javascript'}-->, | |||
left: <!--{$skin1x|escape:'javascript'}-->, | |||
top: <!--{$skin1y|escape:'javascript'}-->, | |||
currentX: <!--{$skin1x|escape:'javascript'}-->, | |||
currentY: <!--{$skin1y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin2(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect2").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin2logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin2painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin2painter|escape:'javascript'}-->"><!--{$skin2painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin2").style.display="block"; | |||
document.getElementById("explain-skin2").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color2)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin2").style.display="block"; | |||
document.getElementById("explain-skin2").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color2)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin2scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin2x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin2y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin2scale|escape:'javascript'}-->, | |||
left: <!--{$skin2x|escape:'javascript'}-->, | |||
top: <!--{$skin2y|escape:'javascript'}-->, | |||
currentX: <!--{$skin2x|escape:'javascript'}-->, | |||
currentY: <!--{$skin2y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin3(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect3").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin3logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin3painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin3painter|escape:'javascript'}-->"><!--{$skin3painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin3").style.display="block"; | |||
document.getElementById("explain-skin3").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color3)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin3").style.display="block"; | |||
document.getElementById("explain-skin3").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color3)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin3scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin3x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin3y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin3scale|escape:'javascript'}-->, | |||
left: <!--{$skin3x|escape:'javascript'}-->, | |||
top: <!--{$skin3y|escape:'javascript'}-->, | |||
currentX: <!--{$skin3x|escape:'javascript'}-->, | |||
currentY: <!--{$skin3y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin4(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect4").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin4logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin4painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin4painter|escape:'javascript'}-->"><!--{$skin4painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin4").style.display="block"; | |||
document.getElementById("explain-skin4").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color4)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin4").style.display="block"; | |||
document.getElementById("explain-skin4").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color4)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin4scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin4x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin4y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin4scale|escape:'javascript'}-->, | |||
left: <!--{$skin4x|escape:'javascript'}-->, | |||
top: <!--{$skin4y|escape:'javascript'}-->, | |||
currentX: <!--{$skin4x|escape:'javascript'}-->, | |||
currentY: <!--{$skin4y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin5(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect5").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin5painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin5painter|escape:'javascript'}-->"><!--{$skin5painter|escape:'javascript'}--></a>'; | |||
document.getElementById("skin5logo").style.display="block"; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin5").style.display="block"; | |||
document.getElementById("explain-skin5").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color5)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin5").style.display="block"; | |||
document.getElementById("explain-skin5").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color5)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin5scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin5x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin5y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin5scale|escape:'javascript'}-->, | |||
left: <!--{$skin5x|escape:'javascript'}-->, | |||
top: <!--{$skin5y|escape:'javascript'}-->, | |||
currentX: <!--{$skin5x|escape:'javascript'}-->, | |||
currentY: <!--{$skin5y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin6(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect6").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin6logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin6painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin6painter|escape:'javascript'}-->"><!--{$skin6painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin6").style.display="block"; | |||
document.getElementById("explain-skin6").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color6)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin6").style.display="block"; | |||
document.getElementById("explain-skin6").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color6)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin6scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin6x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin6y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin6scale|escape:'javascript'}-->, | |||
left: <!--{$skin6x|escape:'javascript'}-->, | |||
top: <!--{$skin6y|escape:'javascript'}-->, | |||
currentX: <!--{$skin6x|escape:'javascript'}-->, | |||
currentY: <!--{$skin6y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin7(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect7").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin7logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin7painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin7painter|escape:'javascript'}-->"><!--{$skin7painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin7").style.display="block"; | |||
document.getElementById("explain-skin7").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color7)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin7").style.display="block"; | |||
document.getElementById("explain-skin7").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color7)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin7scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin7x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin7y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin7scale|escape:'javascript'}-->, | |||
left: <!--{$skin7x|escape:'javascript'}-->, | |||
top: <!--{$skin7y|escape:'javascript'}-->, | |||
currentX: <!--{$skin7x|escape:'javascript'}-->, | |||
currentY: <!--{$skin7y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin8(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect8").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin8logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin8painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin8painter|escape:'javascript'}-->"><!--{$skin8painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin8").style.display="block"; | |||
document.getElementById("explain-skin8").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color8)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin8").style.display="block"; | |||
document.getElementById("explain-skin8").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color8)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin8scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin8x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin8y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin8scale|escape:'javascript'}-->, | |||
left: <!--{$skin8x|escape:'javascript'}-->, | |||
top: <!--{$skin8y|escape:'javascript'}-->, | |||
currentX: <!--{$skin8x|escape:'javascript'}-->, | |||
currentY: <!--{$skin8y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin9(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect9").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin9logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin9painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin9painter|escape:'javascript'}-->"><!--{$skin9painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin9").style.display="block"; | |||
document.getElementById("explain-skin9").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color9)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin9").style.display="block"; | |||
document.getElementById("explain-skin9").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color9)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin9scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin9x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin9y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin9scale|escape:'javascript'}-->, | |||
left: <!--{$skin9x|escape:'javascript'}-->, | |||
top: <!--{$skin9y|escape:'javascript'}-->, | |||
currentX: <!--{$skin9x|escape:'javascript'}-->, | |||
currentY: <!--{$skin9y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function changeskin10(){ | |||
resetlocation(); | |||
clearlogo(); | |||
clearskinselect(); | |||
document.getElementById("skinselect10").style.display="block"; | |||
clearexplain(); | |||
document.getElementById("skin10logo").style.display="block"; | |||
document.getElementById("painter-content").innerHTML='<a href="/w/%E7%94%BB%E5%B8%88%E4%B8%80%E8%A7%88#<!--{$skin10painteruri|escape:'javascript'}-->" title="画师一览#<!--{$skin10painter|escape:'javascript'}-->"><!--{$skin10painter|escape:'javascript'}--></a>'; | |||
var o=document.getElementById("skinbg").style.display; | |||
if(o=="none"){ | |||
clearstage(); | |||
document.getElementById("img-skin10").style.display="block"; | |||
document.getElementById("explain-skin10").style.display="block"; | |||
document.getElementById("skinbg").style.display="block"; | |||
document.getElementById("skinbg").className="skinbg-in"; | |||
document.getElementById("anime-bg").style.backgroundColor="var(--color10)"; | |||
document.getElementById("anime-bg").className="skinbgcolor-in"; | |||
} | |||
else{ | |||
clearskin(); | |||
document.getElementById("img-skin10").style.display="block"; | |||
document.getElementById("explain-skin10").style.display="block"; | |||
document.getElementById("anime-bg").className="skinbgcolor-out"; | |||
setTimeout(function (){document.getElementById("anime-bg").style.backgroundColor="var(--color10)";},150); | |||
setTimeout(function (){document.getElementById("anime-bg").className="skinbgcolor-in";},150); | |||
} | |||
if(document.getElementById("fullOn").style.display=="none"){ | |||
var sch=document.documentElement.clientHeight; | |||
document.getElementById("charimg").style.transform="scale("+(sch/512)+")"; | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
params = { | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
zoomVal:sch/512, | |||
flag: false | |||
}; | |||
}else{ | |||
document.getElementById("charimg").style="transform:scale(<!--{$skin10scale|escape:'javascript'}-->)"; | |||
document.getElementById("img").style.left="<!--{$skin10x|escape:'javascript'}-->px"; | |||
document.getElementById("img").style.top="<!--{$skin10y|escape:'javascript'}-->px"; | |||
params = { | |||
zoomVal:<!--{$skin10scale|escape:'javascript'}-->, | |||
left: <!--{$skin10x|escape:'javascript'}-->, | |||
top: <!--{$skin10y|escape:'javascript'}-->, | |||
currentX: <!--{$skin10x|escape:'javascript'}-->, | |||
currentY: <!--{$skin10y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function clearexplain(){ | |||
document.getElementById("explain-stage0").style.display="none"; | |||
document.getElementById("explain-stage1").style.display="none"; | |||
document.getElementById("explain-stage2").style.display="none"; | |||
document.getElementById("explain-stage3").style.display="none"; | |||
document.getElementById("explain-skin1").style.display="none"; | |||
document.getElementById("explain-skin2").style.display="none"; | document.getElementById("explain-skin2").style.display="none"; | ||
document.getElementById("explain-skin3").style.display="none"; | document.getElementById("explain-skin3").style.display="none"; | ||
document.getElementById("explain-skin4").style.display="none"; | document.getElementById("explain-skin4").style.display="none"; | ||
document.getElementById("explain-skin5").style.display="none"; | document.getElementById("explain-skin5").style.display="none"; | ||
document.getElementById("explain-skin6").style.display="none"; | document.getElementById("explain-skin6").style.display="none"; | ||
document.getElementById("explain-skin7").style.display="none"; | document.getElementById("explain-skin7").style.display="none"; | ||
document.getElementById("explain-skin8").style.display="none"; | document.getElementById("explain-skin8").style.display="none"; | ||
document.getElementById("explain-skin9").style.display="none"; | document.getElementById("explain-skin9").style.display="none"; | ||
document.getElementById("explain-skin10").style.display="none"; | document.getElementById("explain-skin10").style.display="none"; | ||
} | } | ||
function disabledMouseWheel() { | function disabledMouseWheel() { | ||
var div = document.getElementById('all'); | var div = document.getElementById('all'); | ||
if (div.addEventListener) { | if (div.addEventListener) { | ||
div.addEventListener('wheel', scrollFunc, false); | |||
} | }else{ | ||
div. | div.onwheel = scrollFunc;//IE/Opera/Chrome | ||
} | } | ||
} | |||
function scrollFunc(evt) { | |||
evt = evt || window.event; | function scrollFunc(evt) { | ||
if (evt.preventDefault) { | evt = evt || window.event; | ||
// Firefox | if (evt.preventDefault) { | ||
evt.preventDefault(); | // Firefox | ||
evt.stopPropagation(); | evt.preventDefault(); | ||
} else { | evt.stopPropagation(); | ||
// IE | } else { | ||
evt.cancelBubble = true; | // IE | ||
evt.returnValue = false; | evt.cancelBubble = true; | ||
} | evt.returnValue = false; | ||
return false; | } | ||
return false; | |||
} | |||
function fullscreen(){ | |||
if(document.getElementById("widebtn").style.display=="none"){ | |||
refullscreen(); | |||
}else{ | |||
$(all).bind('mousewheel', function(event, delta) {return false;}); | |||
document.getElementsByClassName("outpact")[0].style.width="100vw"; | |||
document.getElementsByClassName("outpact")[0].style.height="100vh"; | |||
document.getElementsByClassName("outpact")[0].style.position="fixed"; | |||
document.getElementsByClassName("outpact")[0].style.top="0px"; | |||
document.getElementsByClassName("outpact")[0].style.left="0px"; | |||
document.getElementsByClassName("inpact")[0].style.width="100vw"; | |||
document.getElementsByClassName("inpact")[0].style.height="100vh"; | |||
document.getElementsByClassName("all")[0].style.width="100vw"; | |||
document.getElementsByClassName("all")[0].style.height="100vh"; | |||
document.getElementsByClassName("all-wrapper")[0].style.width="100vw"; | |||
document.getElementsByClassName("all-wrapper")[0].style.height="100vh"; | |||
document.getElementsByClassName("all-wrap")[0].style.width="100vw"; | |||
document.getElementsByClassName("all-wrap")[0].style.height="100vh"; | |||
document.getElementsByClassName("bg")[0].style.width="100vw"; | |||
document.getElementsByClassName("bg")[0].style.height="100vh"; | |||
document.getElementById("skinbg").style.width="100vw"; | |||
document.getElementById("skinbg").style.height="100vh"; | |||
document.getElementById("mw-panel").style.zIndex="-1"; | |||
document.getElementById("mw-head").style.zIndex="-1"; | |||
$("body").addClass("fullscreen"); | |||
document.getElementsByClassName("backToTop")[0].style.zIndex="-1"; | |||
if($("#rightToc").length>0){ | |||
document.getElementById("rightToc").style.display="none"; | |||
} | |||
document.getElementsByClassName("charimg-wrapper")[0].style.left=window.innerWidth/2-256+'px' | |||
document.getElementsByClassName("charimg-wrapper")[0].style.top=window.innerHeight/2-256+'px' | |||
document.getElementById("img").style.left="0px"; | |||
document.getElementById("img").style.top="0px"; | |||
document.getElementById("widebtn").style.display="none"; | |||
document.getElementById("fullOff").style.display="block"; | |||
document.getElementById("fullOn").style.display="none"; | |||
var sch=document.documentElement.clientHeight/512; | |||
document.getElementById("charimg").style.transform="scale("+sch+")"; | |||
params = { | |||
zoomVal:sch, | |||
left:0, | |||
top:0, | |||
currentX:0, | |||
currentY:0, | |||
flag: false | |||
}; | |||
} | |||
} | |||
function refullscreen(){ | |||
document.getElementsByClassName("outpact")[0].style.width="1024px"; | |||
document.getElementsByClassName("outpact")[0].style.height="576px"; | |||
document.getElementsByClassName("outpact")[0].style.position="inherit"; | |||
document.getElementsByClassName("outpact")[0].style.top="0px"; | |||
document.getElementsByClassName("outpact")[0].style.left="0px"; | |||
document.getElementsByClassName("inpact")[0].style.width="1024px"; | |||
document.getElementsByClassName("inpact")[0].style.height="576px"; | |||
document.getElementsByClassName("all")[0].style.width="1024px"; | |||
document.getElementsByClassName("all")[0].style.height="576px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.width="1024px"; | |||
document.getElementsByClassName("all-wrapper")[0].style.height="576px"; | |||
document.getElementsByClassName("all-wrap")[0].style.width="1024px"; | |||
document.getElementsByClassName("all-wrap")[0].style.height="576px"; | |||
document.getElementsByClassName("bg")[0].style.width="1024px"; | |||
document.getElementsByClassName("bg")[0].style.height="576px"; | |||
document.getElementById("skinbg").style.width="1024px"; | |||
document.getElementById("skinbg").style.height="576px"; | |||
document.getElementById("mw-panel").style.zIndex="1"; | |||
document.getElementById("mw-head").style.zIndex="1"; | |||
$("body").removeClass("fullscreen"); | |||
document.getElementsByClassName("backToTop")[0].style.zIndex="9999"; | |||
if($("#rightToc").length>0){ | |||
document.getElementById("rightToc").style.display="inline"; | |||
} | |||
document.getElementsByClassName("charimg-wrapper")[0].style.left="200px"; | |||
document.getElementsByClassName("charimg-wrapper")[0].style.top="50px"; | |||
document.getElementById("widebtn").style.display="inline"; | |||
if(document.getElementById("wideOn").style.display=="none"){document.getElementById("wideOn").style.display="block";document.getElementById("wideOff").style.display="none";} | |||
params = { | |||
zoomVal:<!--{$stage0scale|escape:'javascript'}-->, | |||
left: <!--{$stage0x|escape:'javascript'}-->, | |||
top: <!--{$stage0y|escape:'javascript'}-->, | |||
currentX: <!--{$stage0x|escape:'javascript'}-->, | |||
currentY: <!--{$stage0y|escape:'javascript'}-->, | |||
flag: false | |||
}; | |||
$(all).unbind('mousewheel'); | |||
document.getElementById("fullOn").style.display="block"; | |||
document.getElementById("fullOff").style.display="none"; | |||
changeStage0(); | |||
} | } | ||
</script> | </script> | ||
<script>particlesJS("charinfoparticles", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":600}},"color":{"value":["#ffffff", "#313131", "#cccccc"]},"shape":{"type":"circle","stroke":{"width":0,"color":["#b61924", "black", "#313131"] },"polygon":{"nb_sides":3},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.5,"sync":false}},"size":{"value":1.7,"random":true,"anim":{"enable":true,"speed":1,"size_min":0.5,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.13629002517356945,"width":1},"move":{"enable":true,"speed":1.5,"direction":"top-left","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":1763.753266952075,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}); | |||
</script></body> | |||
</includeonly><noinclude></noinclude> | |||