HTML和JS完成页面点击四个角弹出管理页面

 

实现方法1：

HTML代码：

        <div class="top-left-corner"></div>
        <div class="top-right-corner"></div>
        <div class="bottom-left-corner"></div>
        <div class="bottom-right-corner"></div>

CSS代码：

.top-left-corner {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.top-right-corner {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

.bottom-left-corner {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.bottom-right-corner {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
}

JS代码：

let [left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [0, 0, 0, 0];

$('.top-left-corner').on("vmousedown", function () {
    [left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [1, 0, 0, 0];
    $(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
});

$('.top-right-corner').on("vmousedown", function () {
    if (left_top_flag) right_top_flag = 1;
    else return;
    $(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
});

$('.bottom-right-corner').on("vmousedown", function () {
    if (left_top_flag && right_top_flag) left_bottom_flag = 1;
    else return;
    $(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
});

$('.bottom-left-corner').on("vmousedown", function () {
    if (left_top_flag && right_top_flag && left_bottom_flag) [left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [0, 0, 0, 0];
    else return;
    $(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
    $('.top-left-corner').css('background', 'none');
    $('.top-right-corner').css('background', 'none');
    $('.bottom-left-corner').css('background', 'none');
    $('.bottom-right-corner').css('background', 'none');
    openInframe("views/admin/chooseLogin.html", "进入管理员登录界面");
});

 实现方法2：

HTML代码：

<div class="hidediv" id="tl"style="position:fixed; left:0px;top:0px;100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv"id="tr"style="position:fixed; left:1180px;top:0px;100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv"id="bl"style="position:fixed; left:0px;top:680px;100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv" id="br"style="position:fixed; left:1180px;top:680px;100px;height:100px;border:0px solid red;z-index:9999"></div>
    

JS代码：

$(".hidediv").click(hidedivCallback);

// 桌面四个角点击事件回调
function hidedivCallback() {
    if (this.id == "tl") {
        global.hideKey = "12";
        $(this).addClass("bg-color-green");
    } else if (this.id == "tr" && global.hideKey == "12") {
        global.hideKey = "1234";
        $(this).addClass("bg-color-green");
    } else if (this.id == "br" && global.hideKey == "1234") {
        global.hideKey = "123456";
        $(this).addClass("bg-color-green");
    } else if (this.id == "bl" && global.hideKey == "123456") {
        global.hideKey = "";
        $(".hidediv").removeClass("bg-color-green");
        // parent.frames['mainframe'].location.href = "core/maintance/index.html";
        parent.frames['mainframe'].location.href = "maintanceBranch.html"; //将core/maintance/index.html 修改为中转页面增加指纹采集
    } else {
        global.hideKey = "";
        $(".hidediv").removeClass("bg-color-green");
    }
}