<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿京东首页无延迟导航</title> <style type="text/css"> .wrap{ position: relative; width: 200px; left: 50px; top: 50px; background: #6c6669; padding: 15px 0; } ul{ list-style: none; margin: 0; padding: 0; color: #fff; border-right-width: 0; } li{ height: 40px; line-height: 40px; padding-left: 12px; cursor: pointer; font-size: 14px; position: relative; } li.active{ background: #999395; } li span:hover{ color: #c81623; } .none{ display: none; } #sub{ width: 600px; min-height: 270px; position: absolute; border: 1px solid #f7f7f7; background: #f7f7f7; box-shadow: 2px 0 5px rgba(0,0,0,.3); left: 200px; top: 0; box-sizing: border-box; margin: 0; padding: 10px; } .sub_content a{ text-decoration: none; color: #666; font-size: 12px; } .sub_content dd a{ border-left: 1px solid #e0e0e0; padding: 0 10px; margin: 4px 0; } .sub_content dl{ overflow: hidden; } .sub_content dt{ float: left; width: 70px; clear: left; font-weight: bold; position: relative; } .sub_content dd{ float: left; margin-left: 5px; border-top: 1px solid #eee; margin-bottom: 5px; } </style> </head> <body> <div class="wrap" id="wrap"> <ul> <li data-id="a"> <span> 一级导航1 </span> </li> <li data-id="b"> <span> 一级导航2 </span> </li> <li data-id="c"> <span> 一级导航3 </span> </li> <li data-id="d"> <span> 一级导航4 </span> </li> <li data-id="e"> <span> 一级导航5 </span> </li> <li data-id="f"> <span> 一级导航6 </span> </li> </ul> <div id="sub" class="none"> <div id="a" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="http://runjs.cn/detail/bge25z6u"> runjs </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> <div id="b" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单2 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> <div id="c" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单3 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> <div id="d" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单4 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> <div id="e" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单5 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> <div id="f" class="sub_content none"> <dl> <dt> <a href="#"> 二级菜单6 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单1 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单6 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> <dl> <dt> <a href="#"> 二级菜单6 </a> </dt> <dd> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> <a href="#"> 三级菜单 </a> </dd> </dl> </div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> /** * Created by Administrator on 2017/4/21. */ $(document).ready(function() { var sub = $("#sub"); var activeRow, activeMenu; var timer; var mouseInSub = false; sub.on("mouseenter", function() { mouseInSub = true; }).on("mouseleave", function() { mouseInSub = false; }); var mouseTrach = []; var moveHandler = function(e) { mouseTrach.push({ x: e.pageX, y: e.pageY }); if (mouseTrach.length > 3) { mouseTrach.shift(); } }; $("#wrap").on("mouseenter", function() { sub.removeClass("none"); $(document).bind("mousemove", moveHandler); }).on("mouseleave", function() { sub.addClass("none"); if (activeRow) { activeRow.removeClass("active"); activeRow = null; } if (activeMenu) { activeMenu.addClass("none"); activeMenu = null; } $(document).unbind("mousemove", moveHandler); }).on("mouseenter", "li", function(e) { if (!activeRow) { activeRow = $(e.target).addClass("active"); activeMenu = $("#" + activeRow.data("id")); activeMenu.removeClass("none"); } if (timer) { clearTimeout(timer); } var curMouse = mouseTrach[mouseTrach.length - 1]; var prevMouse = mouseTrach[mouseTrach.length - 2]; console.log(curMouse, prevMouse); var delay = needDelay(sub, curMouse, prevMouse); if (delay) { timer = setTimeout(function() { if (mouseInSub) { return } activeRow.removeClass("active"); activeMenu.addClass("none"); activeRow = $(e.target); activeRow.addClass("active"); activeMenu = $("#" + activeRow.data("id")); activeMenu.removeClass("none"); timer = null; }, 300); } else { var prevActiveRow = activeRow; var prevActiveMenu = activeMenu; activeRow = $(e.target); activeMenu = $("#" + activeRow.data("id")); prevActiveRow.removeClass("active"); prevActiveMenu.addClass("none"); activeRow.addClass("active"); activeMenu.removeClass("none"); } }); }); function vector(a, b) { return { x: b.x - a.x, y: b.y - a.y } } function vectorPro(v1, v2) { return v1.x * v2.y - v1.y * v2.x; } function sameSign(a, b) { return (a ^ b) >= 0; } function isPoint(p, a, b, c) { var pa = vector(p, a); var pb = vector(p, b); var pc = vector(p, c); var t1 = vectorPro(pa, pb); var t2 = vectorPro(pb, pc); var t3 = vectorPro(pc, pa); return sameSign(t1, t2) && sameSign(t2, t3); } function needDelay(ele, curMouse, prevMouse) { if (!curMouse || !prevMouse) { return } var offset = ele.offset(); var topleft = { x: offset.left, y: offset.top }; var leftbottom = { x: offset.left, y: offset.top + ele.height() }; return isPoint(curMouse, prevMouse, topleft, leftbottom); } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 仿京东首页无延迟导航 喜欢 (0)or分享 (0)
