用户:Mxxisv/沙盒:修订间差异

来自PRTS
跳到导航 跳到搜索
无编辑摘要
无编辑摘要
 
(未显示同一用户的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>

2020年1月20日 (一) 15:29的最新版本

[[文件:立绘 {{#choose: |临光 |伊芙利特 |凛冬 |凯尔希 |初雪 |华法琳 |古米 |可颂 |嘉维尔 |因陀罗 |地灵 |塞雷娅 |夜烟 |夜莺 |夜魔 |天火 |守林人 |安洁莉娜 |崖心 |幽灵鲨 |德克萨斯 |慕斯 |拉普兰德 |推进之王 |断罪者 |斯卡蒂 |星熊 |普罗旺斯 |暗索 |暴行 |末药 |杜宾 |杰西卡 |格劳克斯 |格拉尼 |格雷伊 |梅 |梅尔 |流星 |深海色 |清道夫 |火神 |狮蝎 |猎蜂 |白金 |白雪 |白面鸮 |真理 |砾 |空 |红 |红豆 |缠丸 |能天使 |艾丝黛尔 |艾雅法拉 |芙兰卡 |苏苏洛 |蓝毒 |蛇屠箱 |角峰 |讯使 |诗怀雅 |调香师 |赫默 |远山 |银灰 |锡兰 |闪灵 |阿消 |阿米娅 |陈 |陨星 |雷蛇 |霜叶 |食铁兽 |黑 |赫拉格 |星极 |桃金娘 |坚雷 |麦哲伦 |送葬人 |炎客 |红云 |微风 |伊桑 |莫斯提马 |槐琥 |拜松 |苇草 |布洛卡 |煌 |灰喉 |安比尔 |雪雉 |年 |阿 |吽 }} 2.png||px|link={{#choose: |临光 |伊芙利特 |凛冬 |凯尔希 |初雪 |华法琳 |古米 |可颂 |嘉维尔 |因陀罗 |地灵 |塞雷娅 |夜烟 |夜莺 |夜魔 |天火 |守林人 |安洁莉娜 |崖心 |幽灵鲨 |德克萨斯 |慕斯 |拉普兰德 |推进之王 |断罪者 |斯卡蒂 |星熊 |普罗旺斯 |暗索 |暴行 |末药 |杜宾 |杰西卡 |格劳克斯 |格拉尼 |格雷伊 |梅 |梅尔 |流星 |深海色 |清道夫 |火神 |狮蝎 |猎蜂 |白金 |白雪 |白面鸮 |真理 |砾 |空 |红 |红豆 |缠丸 |能天使 |艾丝黛尔 |艾雅法拉 |芙兰卡 |苏苏洛 |蓝毒 |蛇屠箱 |角峰 |讯使 |诗怀雅 |调香师 |赫默 |远山 |银灰 |锡兰 |闪灵 |阿消 |阿米娅 |陈 |陨星 |雷蛇 |霜叶 |食铁兽 |黑 |赫拉格 |星极 |桃金娘 |坚雷 |麦哲伦 |送葬人 |炎客 |红云 |微风 |伊桑 |莫斯提马 |槐琥 |拜松 |苇草 |布洛卡 |煌 |灰喉 |安比尔 |雪雉 |年 |阿 |吽 }}]]