HollyBlue_Setting

<div id="ctrl" class="col-10 justify-content-center align-self-end">
    <div class="icon" onClick="down()" id="ic-set"></div>
    <div class="icon" onClick="up()" id="ic-set2"></div>
    <div class="icon" onClick="music()" id="ic-music"></div>
    <div class="icon" onClick="hint()" id="ic-hint"></div>
    <div class="icon" onClick="chapter()" id="ic-chap"></div>
    <div class="icon" onClick="team()" id="ic-team"></div>
</div>

/*icon列*/
<script>
var j;
var jump = 0;
var jumping = false;
var ctrl = document.getElementById("ctrl");
var iconS = document.getElementById("ic-set");
var iconS2 = document.getElementById("ic-set2");
var iconM = document.getElementById("ic-music");
var iconH = document.getElementById("ic-hint");
var iconP = document.getElementById("ic-chap");
var iconT = document.getElementById("ic-team");
/*設定以外icon圖示的初始位置*/
iconM.style.marginTop = "-5vh";
iconM.style.opacity = "0";
iconH.style.marginTop = "-5vh";
iconH.style.opacity = "0";
iconP.style.marginTop = "-5vh";
iconP.style.opacity = "0";
iconT.style.marginTop = "-5vh";
iconT.style.opacity = "0";

/*計步器*/
function moveDown(){
    var im = parseInt(iconM.style.marginTop);
    var imo = parseFloat(iconM.style.opacity);
    var ih = parseInt(iconH.style.marginTop);
    var iho = parseFloat(iconH.style.opacity);
    var ip = parseInt(iconP.style.marginTop);
    var ipo = parseFloat(iconP.style.opacity);
    var it = parseInt(iconT.style.marginTop);
    var ito = parseFloat(iconT.style.opacity);

    jump += 1;
    if (jump < 6){
        im += 1;
        imo += 0.2;
        iconM.style.marginTop = im + "vh";
        iconM.style.opacity = imo;
    }
    if (jump > 3 && jump <9){
        ih += 1;
        iho += 0.2;
        iconH.style.marginTop = ih + "vh";
        iconH.style.opacity = iho;
    }
    if (jump > 6 && jump <12){
        ip += 1;
        ipo += 0.2;
        iconP.style.marginTop = ip + "vh";
        iconP.style.opacity = ipo;
    }
    if (jump > 9 && jump <15){
        it += 1;
        ito += 0.2;
        iconT.style.marginTop = it + "vh";
        iconT.style.opacity = ito;
    }
    if (jump > 15){clearInterval(j);  jump = 0; jumping = false;}
}
function moveUp(){
    ehon.style.filter = "brightness(1)";
    var im = parseInt(iconM.style.marginTop);
    var imo = parseFloat(iconM.style.opacity);
    var ih = parseInt(iconH.style.marginTop);
    var iho = parseFloat(iconH.style.opacity);
    var ip = parseInt(iconP.style.marginTop);
    var ipo = parseFloat(iconP.style.opacity);
    var it = parseInt(iconT.style.marginTop);
    var ito = parseFloat(iconT.style.opacity);
    ar_wall.style.zIndex = "0";
    icw.style.zIndex = "0";

    jump += 1;
    if (jump < 6){
        it -= 1;
        ito -= 0.2;
        iconT.style.marginTop = it + "vh";
        iconT.style.opacity = ito;
    }
    if (jump > 3 && jump <9){
        ip -= 1;
        ipo -= 0.2;
        iconP.style.marginTop = ip + "vh";
        iconP.style.opacity = ipo;
    }
    if (jump > 6 && jump <12){
        ih -= 1;
        iho -= 0.2;
        iconH.style.marginTop = ih + "vh";
        iconH.style.opacity = iho;
    }
    if (jump > 9 && jump <15){
        im -= 1;
        imo -= 0.2;
        iconM.style.marginTop = im + "vh";
        iconM.style.opacity = imo;
    }
    if (jump > 15){clearInterval(j); jump = 0; jumping = false;}

    if (inumber == 1){//若有視窗開啟，則收合
        mus_win.style.visibility = "hidden";
        iconM.id = "ic-music";
        iconM.onclick = function() {music();};
        inumber = 0;
    }
    if (inumber == 2){//若有視窗開啟，則收合
        reel_op.style.visibility = "hidden";
        hintword.style.opacity = "0";
        hin_win.style.visibility = "hidden";
        iconH.id = "ic-hint";
        iconH.onclick = function() {hint();};
        inumber = 0;
    }
    if (inumber == 3){//若有視窗開啟，則收合
        iconP.id = "ic-chap";
        iconP.onclick = function() {chapter();};
        if (floating) {return;}
        f = setInterval("floatOut()",30);
        floating = true;
        inumber = 0;
    }
    if (inumber == 4){//若有視窗開啟，則收合
        staf_win.style.visibility = "hidden";
        iconT.id = "ic-team";
        iconT.onclick = function() {team();};
        sta_p1.style.visibility = "hidden";
        sta_p2.style.visibility = "hidden";
        sta_p1.src = "美術/UI/STAFF窗/頁面1.png";
        staff_a.style.visibility = "hidden";
        staff_b.style.visibility = "hidden";
        shye.style.visibility = "hidden";
        inumber = 0;
    }
}
/*click*/
function down(){
    sessionStorage.setItem('NC', '11');
    iconSound.src = iconSound.src;
    iconSound.play();
    if (jumping) {return;}
    j = setInterval("moveDown()",30);
    jumping = true;
    iconS.style.visibility = "hidden";
    iconS2.style.visibility = "visible";
}
function up(){
    iconSound.src = iconSound.src;
    iconSound.play();
    if (jumping) {return;}
    j = setInterval("moveUp()",30);
    jumping = true;
    iconS2.style.visibility = "hidden";
    iconS.style.visibility = "visible";
}
</script>