메뉴 막대 전환
-
-
-
$( () => {
$(() => {
//
let sub = $('#sub');
//
let activeRow;
//
let activeMenu;
//
let timer;
// li ，
//
let mouseTrack = []
// document
mouseHandler = (e) => {
mouseTrack.push({
x: e.pageX,
y: e.pageY
})
//
if (mouseTrack.length > 3) {
mouseTrack.shift();
}
}
$('#test')
.on("mouseenter", () => {
sub.removeClass('none');
$(document).bind("mousemove", mouseHandler)
})
.on("mouseleave", () => {
sub.addClass('none');
//
$(document).unbind("mousemove", mouseHandler);
})
//
.on('mouseenter', 'li', (e) => {
// li li menu
if (timer) {
clearTimeout(timer);
}
//
if (!activeRow) {
activeRow = $(e.target).addClass('active');
activeMenu = $("#" + activeRow.data("id"));
activeMenu.removeClass("none");
}
let currenMouse = mouseTrack[2];
//
let leftCorner = mouseTrack[1];
let delay = needDealy(sub,leftCorner,currenMouse) ;
//
if(delay) {
timer = setTimeout(() => {
// li
activeRow.removeClass('active');
activeMenu.addClass('none');
// li
activeRow = $(e.target);
activeMenu = $("#" + activeRow.data("id"));
activeRow.addClass("active");
activeMenu.removeClass("none");
timer = null;
}, 300);
}else{
var perActiveRow = activeRow;
var perActiveMenu = activeMenu;
activeRow = $(e.target);
activeMenu = $('#' + activeRow.data('id'));
perActiveRow.removeClass('active');
perActiveMenu.addClass('none');
activeRow.addClass('active');
activeMenu.removeClass('none')
}
});
// li menu 0
//
// 2
function vector(a, b) {
return {
x: a.x - b.x,
y: a.y - b.y
}
}
//
function vectorProduct(a, b) {
return a.x * b.y - a.y * b.x;
}
//
function isPositionInAngle(p, a, b, c) {
let pa = vector(p, a);
let pb = vector(p, b);
let pc = vector(p, c);
let t1 = vectorProduct(pa, pb);
let t2 = vectorProduct(pa, pc);
let t3 = vectorProduct(pb, pc);
return t1 * t2 * t3 > 0;
// 0
}
// li
// ele leftCorner currenMouse
function needDealy(ele, leftCorner, currenMouse) {
//
let offset = ele.offset();
//
let topLeft = {
x: offset.left,
y: offset.top
}
//
let bottomLeft = {
x: offset.left,
y: offset.top + ele.height
}
return isPositionInAngle(currenMouse,leftCorner,topLeft,bottomLeft) ;
}
})
이렇게 하면 완벽한 메뉴 표시줄을 지연 없이 전환할 수 있다.지식 포인트 이벤트 의뢰 사용자 행위 사전 판단
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
