|
|
(未显示同一用户的12个中间版本) |
第1行: |
第1行: |
| <includeonly>
| | {{#vardefine:RandomSelectionCharacter|{{#choose: |
| <!DOCTYPE html>
| | |临光 |
| <html lang="en">
| | |伊芙利特 |
| | | |凛冬 |
| <head>
| | |凯尔希 |
| <meta charset="UTF-8">
| | |初雪 |
| <title>Title</title>
| | |华法琳 |
| <style>
| | |古米 |
| html {
| | |可颂 |
| line-height: 1.6;
| | |嘉维尔 |
| }
| | |因陀罗 |
| | | |地灵 |
| :root {
| | |塞雷娅 |
| --color1:< !-- {
| | |夜烟 |
| $color1
| | |夜莺 |
| }
| | |夜魔 |
| | | |天火 |
| -->;
| | |守林人 |
| | | |安洁莉娜 |
| --color2:< !-- {
| | |崖心 |
| $color2
| | |幽灵鲨 |
| }
| | |德克萨斯 |
| | | |慕斯 |
| -->;
| | |拉普兰德 |
| | | |推进之王 |
| --color3:< !-- {
| | |断罪者 |
| $color3
| | |斯卡蒂 |
| }
| | |星熊 |
| | | |普罗旺斯 |
| -->;
| | |暗索 |
| | | |暴行 |
| --color4:< !-- {
| | |末药 |
| $color4
| | |杜宾 |
| }
| | |杰西卡 |
| | | |格劳克斯 |
| -->;
| | |格拉尼 |
| | | |格雷伊 |
| --color5:< !-- {
| | |梅 |
| $color5
| | |梅尔 |
| }
| | |流星 |
| | | |深海色 |
| -->;
| | |清道夫 |
| | | |火神 |
| --color6:< !-- {
| | |狮蝎 |
| $color6
| | |猎蜂 |
| }
| | |白金 |
| | | |白雪 |
| -->;
| | |白面鸮 |
| | | |真理 |
| --color7:< !-- {
| | |砾 |
| $color7
| | |空 |
| }
| | |红 |
| | | |红豆 |
| -->;
| | |缠丸 |
| | | |能天使 |
| --color8:< !-- {
| | |艾丝黛尔 |
| $color8
| | |艾雅法拉 |
| }
| | |芙兰卡 |
| | | |苏苏洛 |
| -->;
| | |蓝毒 |
| | | |蛇屠箱 |
| --color9:< !-- {
| | |角峰 |
| $color9
| | |讯使 |
| }
| | |诗怀雅 |
| | | |调香师 |
| -->;
| | |赫默 |
| | | |远山 |
| --color10:< !-- {
| | |银灰 |
| $color10
| | |锡兰 |
| }
| | |闪灵 |
| | | |阿消 |
| -->;
| | |阿米娅 |
| }
| | |陈 |
| | | |陨星 |
| .charlogo {
| | |雷蛇 |
| position: absolute;
| | |霜叶 |
| top: 5px;
| | |食铁兽 |
| left: 0px;
| | |黑 |
| z-index: 4;
| | |赫拉格 |
| width: 260px;
| | |星极 |
| height: 260px;
| | |桃金娘 |
| }
| | |坚雷 |
| | | |麦哲伦 |
| .logo-wrapper {
| | |送葬人 |
| position: relative;
| | |炎客 |
| width: 260px;
| | |红云 |
| height: 260px;
| | |微风 |
| }
| | |伊桑 |
| | | |莫斯提马 |
| .logo-wrap {
| | |槐琥 |
| position: absolute;
| | |拜松 |
| max-width: 100%;
| | |苇草 |
| height: auto;
| | |布洛卡 |
| top: 50%;
| | |煌 |
| left: 50%;
| | |灰喉 |
| transform: translate3d(-50%, -50%, 0);
| | |安比尔 |
| -webkit-transform: translate3d(-50%, -50%, 0);
| | |雪雉 |
| }
| | |年 |
| | | |阿 |
| .all {
| | |吽 |
| width: 1024px;
| | }}}} |
| height: 576px;
| | [[文件:立绘 {{#var:RandomSelectionCharacter}} 2.png|{{{location|}}}|{{{width|}}}px|link={{#var:RandomSelectionCharacter}}]] |
| 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;
| |
| }
| |
| | |
| .skinbg {
| |
| position: absolute;
| |
| z-index: 2;
| |
| }
| |
| | |
| .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;
| |
| right: 15px;
| |
| bottom: 15px;
| |
| width: 300px;
| |
| height: 190px;
| |
| background-color: rgba(49, 49, 49, .85);
| |
| box-shadow: 0 0 10px #000;
| |
| line-height: 1.6;
| |
| z-index: 999;
| |
| }
| |
| | |
| .explain-title {
| |
| padding-top: 5px;
| |
| padding-left: 10px;
| |
| font-size: 16px;
| |
| color: #c9c9c9;
| |
| }
| |
| | |
| .explain-type {
| |
| font-size: 14px;
| |
| color: black;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| .explain-skin1type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color1);
| |
| }
| |
| | |
| .explain-skin2type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color2);
| |
| }
| |
| | |
| .explain-skin3type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color3);
| |
| }
| |
| | |
| .explain-skin4type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color4);
| |
| }
| |
| | |
| .explain-skin5type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color5);
| |
| }
| |
| | |
| .explain-skin6type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color6);
| |
| }
| |
| | |
| .explain-skin7type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color7);
| |
| }
| |
| | |
| .explain-skin8type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color8);
| |
| }
| |
| | |
| .explain-skin9type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color9);
| |
| }
| |
| | |
| .explain-skin10type {
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| background-color: var(--color10);
| |
| }
| |
| | |
| .typewrapper {
| |
| padding-top: 2px;
| |
| padding-left: 10px;
| |
| }
| |
| | |
| .explain-content {
| |
| padding-top: 2px;
| |
| padding-left: 10px;
| |
| padding-right: 10px;
| |
| color: white;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .features-wrapper {
| |
| position: absolute;
| |
| right: 15px;
| |
| bottom: 210px;
| |
| width: 300px;
| |
| height: 110px;
| |
| background-color: rgba(49, 49, 49, .85);
| |
| box-shadow: 0 0 20px #000;
| |
| line-height: 1.6;
| |
| z-index: 999;
| |
| }
| |
| | |
| .features-title {
| |
| padding-top: 7px;
| |
| padding-left: 10px;
| |
| font-size: 16px;
| |
| color: #c9c9c9;
| |
| }
| |
| | |
| .features-content {
| |
| width: 280px;
| |
| height: 78px;
| |
| text-align: center;
| |
| font-size: 14px;
| |
| color: white;
| |
| padding-left: 10px;
| |
| padding-right: 10px;
| |
| display: none;
| |
| }
| |
| | |
| .skinbutton-wrapper {
| |
| position: absolute;
| |
| top: 10px;
| |
| right: 15px;
| |
| width: 300px;
| |
| height: 240px;
| |
| background-color: rgba(49, 49, 49, .0);
| |
| overflow: scroll;
| |
| z-index: 998;
| |
| -ms-overflow-style: none;
| |
| overflow: -moz-scrollbars-none;
| |
| }
| |
| | |
| .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;
| |
| display: none;
| |
| }
| |
| | |
| .headcolor1 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color1);
| |
| }
| |
| | |
| .headcolor2 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color2);
| |
| }
| |
| | |
| .headcolor3 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color3);
| |
| }
| |
| | |
| .headcolor4 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color4);
| |
| }
| |
| | |
| .headcolor5 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color5);
| |
| }
| |
| | |
| .headcolor6 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color6);
| |
| }
| |
| | |
| .headcolor7 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color7);
| |
| }
| |
| | |
| .headcolor8 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color8);
| |
| }
| |
| | |
| .headcolor9 {
| |
| position: absolute;
| |
| top: 0px;
| |
| left: 0px;
| |
| width: 7px;
| |
| height: 60px;
| |
| display: inline-block;
| |
| background-color: var(--color9);
| |
| }
| |
| | |
| .headcolor10 {
| |
| position: absolute;
| |
| 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 {
| |
| 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 {
| |
| 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: red;
| |
| }
| |
| | |
| .chartag1-wrapper {
| |
| position: absolute;
| |
| left: 100px;
| |
| bottom: 15px;
| |
| width: 210px;
| |
| height: 45px;
| |
| background: black;
| |
| opacity: 0.7;
| |
| border-radius: 5px;
| |
| border: 2px solid #a0a0a0;
| |
| z-index: 999;
| |
| }
| |
| | |
| .chartag1-content {
| |
| color: white;
| |
| font-size: 15px;
| |
| text-align: center;
| |
| padding-top: 10px;
| |
| }
| |
| | |
| .chartag2-wrapper {
| |
| position: absolute;
| |
| left: 100px;
| |
| bottom: 65px;
| |
| width: 210px;
| |
| height: 22px;
| |
| background: black;
| |
| opacity: 0.7;
| |
| border-radius: 5px;
| |
| border: 2px solid #a0a0a0;
| |
| z-index: 999;
| |
| }
| |
| | |
| .chartag2-content {
| |
| color: white;
| |
| font-size: 15px;
| |
| text-align: center;
| |
| }
| |
| | |
| .charname {
| |
| position: absolute;
| |
| left: 18px;
| |
| bottom: 73px;
| |
| 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: 600;
| |
| font-family: 微软雅黑, 黑体;
| |
| z-index: 999;
| |
| | |
| }
| |
| | |
| .charname-en {
| |
| position: absolute;
| |
| left: 16px;
| |
| bottom: 160px;
| |
| z-index: 999;
| |
| font-size: 26px;
| |
| color: white;
| |
| font-weight: 900;
| |
| -webkit-text-stroke: 1.2px #7e7e7e;
| |
| font-family: 微软雅黑, 黑体;
| |
| }
| |
| | |
| .star {
| |
| position: absolute;
| |
| left: 11px;
| |
| bottom: 190px;
| |
| z-index: 999;
| |
| width: 140px;
| |
| height: 38px;
| |
| }
| |
| | |
| .cv-wrapper {
| |
| position: absolute;
| |
| left: 18px;
| |
| bottom: 235px;
| |
| width: 220px;
| |
| height: 30px;
| |
| background-color: black;
| |
| z-index: 999;
| |
| }
| |
| | |
| .cv-bg {
| |
| position: relative;
| |
| width: 220px;
| |
| height: 30px;
| |
| }
| |
| | |
| .cv-logo {
| |
| position: absolute;
| |
| top: 4px;
| |
| left: 4px;
| |
| }
| |
| | |
| .cv-title {
| |
| position: absolute;
| |
| top: 2px;
| |
| left: 40px;
| |
| font-size: 16px;
| |
| color: white;
| |
| }
| |
| | |
| .cv-content {
| |
| position: absolute;
| |
| right: 0px;
| |
| top: 0px;
| |
| width: 120px;
| |
| height: 28px;
| |
| background-color: #7e7e7e;
| |
| text-align: center;
| |
| font-size: 16px;
| |
| color: white;
| |
| padding-top: 2px;
| |
| }
| |
| | |
| .painter-wrapper {
| |
| position: absolute;
| |
| left: 18px;
| |
| bottom: 275px;
| |
| width: 220px;
| |
| height: 30px;
| |
| background-color: black;
| |
| z-index: 999;
| |
| }
| |
| | |
| .painter-bg {
| |
| position: relative;
| |
| width: 220px;
| |
| height: 30px;
| |
| }
| |
| | |
| .painter-logo {
| |
| position: absolute;
| |
| top: 4px;
| |
| left: 4px;
| |
| }
| |
| | |
| .painter-title {
| |
| position: absolute;
| |
| top: 2px;
| |
| left: 40px;
| |
| font-size: 16px;
| |
| color: white;
| |
| }
| |
| | |
| .painter-content {
| |
| position: absolute;
| |
| right: 0px;
| |
| top: 0px;
| |
| width: 120px;
| |
| height: 28px;
| |
| background-color: #7e7e7e;
| |
| text-align: center;
| |
| font-size: 16px;
| |
| color: white;
| |
| 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;
| |
| }
| |
| | |
| .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;
| |
| }
| |
| | |
| .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;
| |
| }
| |
| | |
| .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: 50px;
| |
| height: 50px;
| |
| position: absolute;
| |
| bottom: 15px;
| |
| right: 320px;
| |
| background-color: rgba(49, 49, 49, .85);
| |
| z-index: 1001;
| |
| box-shadow: 0 0 10px #000;
| |
| cursor: pointer;
| |
| }
| |
| | |
| #clearui {
| |
| padding-top: 10px;
| |
| padding-left: 10px;
| |
| display: block;
| |
| }
| |
| | |
| #returnui {
| |
| padding-top: 10px;
| |
| padding-left: 10px;
| |
| display: none;
| |
| }
| |
| | |
| .charimg-stage {
| |
| display: none;
| |
| }
| |
| | |
| .charimg-skin {
| |
| display: none;
| |
| }
| |
| | |
| .logodis {
| |
| display: none;
| |
| }
| |
| | |
| .outpact {
| |
| position: relative;
| |
| width: 1024px;
| |
| height: 576px;
| |
| }
| |
| | |
| .inpact {
| |
| position: absolute;
| |
| width: 1024px;
| |
| height: 576px;
| |
| }
| |
| | |
| .rare {
| |
| display: none;
| |
| }
| |
| </style>
| |
| </head>
| |
| | |
| <body>
| |
| <div id="rare" class="rare">
| |
| <!--{$rare}-->
| |
| </div>
| |
| <div class=outpact>
| |
| <div class="skinbutton-wrapper" id="skinbutton-wrapper">
| |
| <div class="skinbutton" id="skin1" onclick="changeskin1();">
| |
| <div class="headcolor1"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead1}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname1">
| |
| <!--{$skinname1}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin2" onclick="changeskin2();">
| |
| <div class="headcolor2"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead2}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname2">
| |
| <!--{$skinname2}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin3" onclick="changeskin3();">
| |
| <div class="headcolor3"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead3}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname3">
| |
| <!--{$skinname3}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin4" onclick="changeskin4();">
| |
| <div class="headcolor4"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead4}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname4">
| |
| <!--{$skinname4}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin5" onclick="changeskin5();">
| |
| <div class="headcolor5"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead5}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname5">
| |
| <!--{$skinname5}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin6" onclick="changeskin6();">
| |
| <div class="headcolor6"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead6}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname6">
| |
| <!--{$skinname6}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin7" onclick="changeskin7();">
| |
| <div class="headcolor7"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead7}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname7">
| |
| <!--{$skinname7}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin8" onclick="changeskin8();">
| |
| <div class="headcolor8"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead8}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname8">
| |
| <!--{$skinname8}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin9" onclick="changeskin9();">
| |
| <div class="headcolor9"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead9}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname9">
| |
| <!--{$skinname9}-->
| |
| </div>
| |
| </div>
| |
| <div class="skinbutton" id="skin10" onclick="changeskin10();">
| |
| <div class="headcolor10"></div>
| |
| <div class="charhead">
| |
| <!--{$skinhead10}-->
| |
| </div>
| |
| <div class="headmask"></div>
| |
| <div class="skinname" id="skinname10">
| |
| <!--{$skinname10}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class=inpact>
| |
| <div class="all" id="all">
| |
| <!-- 普通背景 -->
| |
| <!-- 皮肤button -->
| |
| <div class="all-wrapper">
| |
| <div class="all-wrap">
| |
| <div class="bg"><img src="/images/4/49/%E5%B9%B2%E5%91%98%E4%BF%A1%E6%81%AF_%E8%83%8C%E6%99%AF.png" /></div>
| |
| <!-- 皮肤背景 -->
| |
| <div class="skinbg" id="skinbg" style="display:none"><img src="/images/6/68/%E5%B9%B2%E5%91%98%E4%BF%A1%E6%81%AF_%E8%83%8C%E6%99%AF2.png"></div>
| |
| <!-- 左上logo -->
| |
| <div class="charlogo">
| |
| <div id="deflogo">
| |
| <!--{$deflogo}-->
| |
| </div>
| |
| <div class="logo-wrapper">
| |
| <div class="logo-wrap">
| |
| <div id="skin1logo" class="logodis">
| |
| <!--{$skin1logo}-->
| |
| </div>
| |
| <div id="skin2logo" class="logodis">
| |
| <!--{$skin2logo}-->
| |
| </div>
| |
| <div id="skin3logo" class="logodis">
| |
| <!--{$skin3logo}-->
| |
| </div>
| |
| <div id="skin4logo" class="logodis">
| |
| <!--{$skin4logo}-->
| |
| </div>
| |
| <div id="skin5logo" class="logodis">
| |
| <!--{$skin5logo}-->
| |
| </div>
| |
| <div id="skin6logo" class="logodis">
| |
| <!--{$skin6logo}-->
| |
| </div>
| |
| <div id="skin7logo" class="logodis">
| |
| <!--{$skin7logo}-->
| |
| </div>
| |
| <div id="skin8logo" class="logodis">
| |
| <!--{$skin8logo}-->
| |
| </div>
| |
| <div id="skin9logo" class="logodis">
| |
| <!--{$skin9logo}-->
| |
| </div>
| |
| <div id="skin10logo" class="logodis">
| |
| <!--{$skin10logo}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div id="charright">
| |
| <!-- 服装描述 -->
| |
| <div class="explain-wrapper">
| |
| <div class="explain-title">描述</div>
| |
| <div id="explain-stage0">
| |
| <div class="typewrapper"><span class="explain-type">默认服装</span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainstage0}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-stage1" style="display:none">
| |
| <div class="typewrapper"><span class="explain-type">默认服装</span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainstage1}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-stage2" style="display:none">
| |
| <div class="typewrapper"><span class="explain-type">默认服装</span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainstage2}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-stage3" style="display:none">
| |
| <div class="typewrapper"><span class="explain-type">默认服装</span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainstage3}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin1" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin1type">
| |
| <!--{$skin1series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin1}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin2" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin2type">
| |
| <!--{$skin2series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin2}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin3" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin3type">
| |
| <!--{$skin3series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin3}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin4" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin4type">
| |
| <!--{$skin4series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin4}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin5" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin5type">
| |
| <!--{$skin5series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin5}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin6" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin6type">
| |
| <!--{$skin6series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin6}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin7" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin7type">
| |
| <!--{$skin7series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin7}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin8" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin8type">
| |
| <!--{$skin8series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin8}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin9" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin9type">
| |
| <!--{$skin9series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin9}-->
| |
| </div>
| |
| </div>
| |
| <div id="explain-skin10" style="display:none">
| |
| <div class="typewrapper"><span class="explain-skin10type">
| |
| <!--{$skin10series}--></span></div>
| |
| <div class="explain-content">
| |
| <!--{$explainskin10}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <!-- 特性 -->
| |
| <div class="features-wrapper">
| |
| <div class="features-title">特性</div>
| |
| <div class="features-content" id="features0" style="display:block">
| |
| <!--{$features0}-->
| |
| </div>
| |
| <div class="features-content" id="features1">
| |
| <!--{$features1}-->
| |
| </div>
| |
| <div class="features-content" id="features2">
| |
| <!--{$features2}-->
| |
| </div>
| |
| <div class="features-content" id="features3">
| |
| <!--{$features3}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <!-- 切换动画矩形 -->
| |
| <div class="anime-bg" id="anime-bg"></div>
| |
| <!-- 干员立绘 -->
| |
| <div class="charimg-wrapper">
| |
| <div id="charImgmove" onmousewheel="return bbimg(this)">
| |
| <div id="img">
| |
| <div id="charimg">
| |
| <div id="img-stage0" class="charimg-stage" style="display:block">
| |
| <!--{$charstage0}-->
| |
| </div>
| |
| <div id="img-stage1" class="charimg-stage">
| |
| <!--{$charstage1}-->
| |
| </div>
| |
| <div id="img-stage2" class="charimg-stage">
| |
| <!--{$charstage2}-->
| |
| </div>
| |
| <div id="img-stage3" class="charimg-stage">
| |
| <!--{$charstage3}-->
| |
| </div>
| |
| <div id="img-skin1" class="charimg-skin">
| |
| <!--{$charskin1}-->
| |
| </div>
| |
| <div id="img-skin2" class="charimg-skin">
| |
| <!--{$charskin2}-->
| |
| </div>
| |
| <div id="img-skin3" class="charimg-skin">
| |
| <!--{$charskin3}-->
| |
| </div>
| |
| <div id="img-skin4" class="charimg-skin">
| |
| <!--{$charskin4}-->
| |
| </div>
| |
| <div id="img-skin5" class="charimg-skin">
| |
| <!--{$charskin5}-->
| |
| </div>
| |
| <div id="img-skin6" class="charimg-skin">
| |
| <!--{$charskin6}-->
| |
| </div>
| |
| <div id="img-skin7" class="charimg-skin">
| |
| <!--{$charskin7}-->
| |
| </div>
| |
| <div id="img-skin8" class="charimg-skin">
| |
| <!--{$charskin8}-->
| |
| </div>
| |
| <div id="img-skin9" class="charimg-skin">
| |
| <!--{$charskin9}-->
| |
| </div>
| |
| <div id="img-skin10" class="charimg-skin">
| |
| <!--{$charskin10}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div id="charin">
| |
| <!-- 职业logo -->
| |
| <div class="charclass">
| |
| <!--{$classlogo}-->
| |
| </div>
| |
| <!-- 干员tag1 -->
| |
| <div class="chartag1-wrapper">
| |
| <div class="chartag1-content">
| |
| <!--{$chartag1}-->
| |
| </div>
| |
| </div>
| |
| <!-- 干员tag2 -->
| |
| <div class="chartag2-wrapper">
| |
| <div class="chartag2-content">
| |
| <!--{$chartag2}-->
| |
| </div>
| |
| </div>
| |
| <!-- 干员代号 -->
| |
| <div class="charname">
| |
| <!--{$charname}-->
| |
| </div>
| |
| <!-- 干员代号英文 -->
| |
| <div class="charname-en">
| |
| <!--{$charnameEN}-->
| |
| </div>
| |
| <!-- 稀有度 -->
| |
| <div class="star">
| |
| <!--{$star}-->
| |
| </div>
| |
| <!-- 配音 -->
| |
| <div class="cv-wrapper">
| |
| <div class="cv-bg">
| |
| <div class="cv-logo"><img src="/images/7/71/%E9%BA%A6%E5%85%8B%E9%A3%8E.png" width="18px"></div>
| |
| <div class="cv-title">配音</div>
| |
| <div class="cv-content">
| |
| <!--{$cv}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <!-- 画师 -->
| |
| <div class="painter-wrapper">
| |
| <div class="painter-bg">
| |
| <div class="painter-logo"><img src="/images/c/c8/V7D8mQ.png" width="18px"></div>
| |
| <div class="painter-title">画师</div>
| |
| <div class="painter-content">
| |
| <!--{$painter}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <!-- 精英化button -->
| |
| <div id="stageWrapper">
| |
| <div class="stage0-btn-wrapper" onclick="changeStage0();">
| |
| <div class="satge0-btn-bg">
| |
| <div class="stage0-btn-logo"><img src="/images/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="/images/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">
| |
| <div class="satge1-btn-bg">
| |
| <div class="stage1-btn-logo"><img src="/images/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="/images/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">
| |
| <div class="satge2-btn-bg">
| |
| <div class="stage2-btn-logo"><img src="/images/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="/images/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="/images/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="/images/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" onclick="clearimg();">
| |
| <div id="clearui"><img src="/images/b/bc/%E5%90%91%E5%8F%B3.png" width="30px"></div>
| |
| <div id="returnui"><img src="/images/9/90/%E5%90%91%E5%B7%A6.png" width="30px"></div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </body>
| |
| <script language="javascript">
| |
| var params = {
| |
| zoomVal: 1,
| |
| left: 0,
| |
| top: 0,
| |
| currentX: 0,
| |
| currentY: 0,
| |
| flag: false
| |
| };
| |
| //图片缩放
| |
| function bbimg(o) {
| |
| var o = o.getElementsByTagName("img")[0];
| |
| params.zoomVal += 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;
| |
| }
| |
| }
| |
| //获取相关CSS属性
| |
| var getCss = function(o, key) {
| |
| 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 (getCss(target, "top") !== "auto") {
| |
| params.top = getCss(target, "top");
| |
| }
| |
| //o是移动对象
| |
| bar.onmousedown = function(event) {
| |
| params.flag = true;
| |
| if (!event) {
| |
| event = window.event;
| |
| //防止IE文字选中
| |
| 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"))
| |
| | |
| window.onload = function() {
| |
| setstagebtn();
| |
| setskinbtn();
| |
| setskinlogo();
| |
| disabledMouseWheel();
| |
| }
| |
| | |
| 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 setskinbtn() {
| |
| if (document.getElementById("skinname1").innerHTML != "") {
| |
| document.getElementById("skin1").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname2").innerHTML != "") {
| |
| document.getElementById("skin2").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname3").innerHTML != "") {
| |
| document.getElementById("skin3").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname4").innerHTML != "") {
| |
| document.getElementById("skin4").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname5").innerHTML != "") {
| |
| document.getElementById("skin5").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname6").innerHTML != "") {
| |
| document.getElementById("skin6").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname7").innerHTML != "") {
| |
| document.getElementById("skin7").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname8").innerHTML != "") {
| |
| document.getElementById("skin8").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname9").innerHTML != "") {
| |
| document.getElementById("skin9").style.display = "block";
| |
| }
| |
| if (document.getElementById("skinname10").innerHTML != "") {
| |
| document.getElementById("skin10").style.display = "block";
| |
| }
| |
| }
| |
| | |
| 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 clearimg() {
| |
| var dis = document.getElementById("stageWrapper").style.display;
| |
| if (dis == "none") {
| |
| document.getElementById("stageWrapper").style.display = "block";
| |
| document.getElementById("charin").style.display = "block";
| |
| document.getElementById("charright").style.display = "block";
| |
| document.getElementById("returnui").style.display = "none";
| |
| document.getElementById("clearui").style.display = "block";
| |
| document.getElementById("clearbtn").style.right = "320px";
| |
| document.getElementById("skinbutton-wrapper").style.display = "block";
| |
| } else {
| |
| document.getElementById("stageWrapper").style.display = "none";
| |
| document.getElementById("charin").style.display = "none";
| |
| document.getElementById("charright").style.display = "none";
| |
| document.getElementById("returnui").style.display = "block";
| |
| document.getElementById("clearui").style.display = "none";
| |
| document.getElementById("clearbtn").style.right = "15px";
| |
| document.getElementById("skinbutton-wrapper").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 changeStage0() {
| |
| resetlocation();
| |
| clearexplain();
| |
| clearfeatures();
| |
| 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";
| |
| }
| |
| }
| |
| | |
| function changeStage1() {
| |
| resetlocation();
| |
| clearexplain();
| |
| clearfeatures();
| |
| 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";
| |
| }
| |
| }
| |
| | |
| function changeStage2() {
| |
| resetlocation();
| |
| clearexplain();
| |
| clearfeatures();
| |
| 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";
| |
| }
| |
| }
| |
| | |
| 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 changeskin1() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin1logo").style.display = "block";
| |
| 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);
| |
| | |
| }
| |
| }
| |
| | |
| function changeskin2() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin2logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin3() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin3logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin4() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin4logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin5() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin6() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin6logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin7() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin7logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin8() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin8logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin9() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin9logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| function changeskin10() {
| |
| resetlocation();
| |
| clearlogo();
| |
| clearexplain();
| |
| document.getElementById("skin10logo").style.display = "block";
| |
| 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);
| |
| }
| |
| }
| |
| | |
| 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-skin3").style.display = "none";
| |
| document.getElementById("explain-skin4").style.display = "none";
| |
| document.getElementById("explain-skin5").style.display = "none";
| |
| document.getElementById("explain-skin6").style.display = "none";
| |
| document.getElementById("explain-skin7").style.display = "none";
| |
| document.getElementById("explain-skin8").style.display = "none";
| |
| document.getElementById("explain-skin9").style.display = "none";
| |
| document.getElementById("explain-skin10").style.display = "none";
| |
| }
| |
| | |
| function disabledMouseWheel() {
| |
| var div = document.getElementById('all');
| |
| if (div.addEventListener) {
| |
| div.addEventListener('DOMMouseScroll', scrollFunc, false);
| |
| } //W3C
| |
| div.onmousewheel = div.onmousewheel = scrollFunc; //IE/Opera/Chrome
| |
| }
| |
| | |
| function scrollFunc(evt) {
| |
| evt = evt || window.event;
| |
| if (evt.preventDefault) {
| |
| // Firefox
| |
| evt.preventDefault();
| |
| evt.stopPropagation();
| |
| } else {
| |
| // IE
| |
| evt.cancelBubble = true;
| |
| evt.returnValue = false;
| |
| }
| |
| return false;
| |
| }
| |
| </script>
| |
| | |
| </html>
| |
| </includeonly>
| |
| <noinclude></noinclude>
| |