实现方法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");
}
}