【原生JavaScript案例】原生JS模块化开发京东主页二级侧拉效果（用户鼠标行为预测行为）

用户鼠标行为预测

部分源码

window.onLoad = function() {init();
}function init() {initMenu();
}var initMenu = (function() {var oMenu = document.getElementsByClassName('menu-wrap')[0],oMenuItems = oMenu.getElementsByClassName('main-item'),oSub = oMenu.getElementsByClassName('sub')[0],oSubItems = oSub.getElementsByClassName('sub-item'),oSubLen = oSubItems.length,oMenuLen = oMenuItems.length,menuItem,subItem,// 判断鼠标是否进入子菜单标识isInSub = false,// 定时器t = null,// 记录鼠标进入菜单的三个坐标mousePos = [],// 是否是第一次进入isFirst = true;for(var i = 0; i < oMenuLen; i ++) {menuItem = oMenuItems[i];addEvent(menuItem, 'mouseenter', menuItemMouseEnter);addEvent(oMenu, 'mouseenter', function() {addEvent(document, 'mousemove', mouseMove);});addEvent(oMenu, 'mouseleave', mouseOut);addEvent(oSub, 'mouseenter', function() {isInSub = true;});addEvent(oSub, 'mouseleave', function() {isInSub = false;});}function menuItemMouseEnter(e) {var e = e || window.event,tar = e.target || e.srcElement,// 获取当前聚焦项的索引thisIdx = Array.prototype.indexOf.call(oMenuItems, tar),// 倒数第二个坐标lastPos = mousePos[mousePos.length - 2] || {x: 0, y: 0},// 最后一个坐标curPos = mousePos[mousePos.length - 1] || {x: 0, y: 0},// 判断是否延时toDelay = doTimeout(lastPos, curPos);if(t) {clearTimeout(t);}if(!isFirst) {if(toDelay) {t = setTimeout(function() {// 如果鼠标在子菜单中 直接return，不走后续逻辑if(isInSub) return;// 添加删除聚焦类addActive(thisIdx);}, 500);}else {// 添加删除聚焦类addActive(thisIdx);	}}else {isFirst = false;addActive(thisIdx);}// 显示右侧页面 去除类名: hideoSub.className = 'sub';}function addActive(index) {removeAllActive();oMenuItems[index].className += ' active';	oSubItems[index].className += ' active';	}function removeAllActive() {for(var i = 0; i < oMenuLen; i ++) {menuItem = oMenuItems[i];menuItem.className = 'main-item';}for(var i = 0; i < oSubLen; i ++) {subItem = oSubItems[i];subItem.className = 'sub-item';}}function mouseOut(e) {oSub.className += ' hide';removeAllActive();removeEvent(oMenu, 'mouseleave', mouseMove);}function mouseMove(e) {var e = e || window.event;mousePos.push({x: pagePos(e).x,y: pagePos(e).y});if(mousePos.length > 3) {mousePos.shift();}}// 是否延迟function doTimeout(lastPos, curPos) {var topLeft = {x: getStyles(oMenu, 'width') + getStyles(oMenu, 'margin-left'),y: getStyles(oMenu, 'margin-top')}var bottomLeft = {x: getStyles(oMenu, 'width') + getStyles(oMenu, 'margin-left'),y: getStyles(oMenu, 'margin-top') + getStyles(oSub, 'height' )}return pointInTriangle(curPos, lastPos, topLeft, bottomLeft);}})();

案例源码

仿京东主页二级菜单侧拉效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！