學習慕課網https://www.imooc.com/learn/829學習js實現京東無延遲菜單效果。
首先是主頁目錄設置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/megadropdown.js"></script>
<script src="js/functions.js"></script>
<style type="text/css">
.wrap{
position: relative;//設置定位
width: 200px;
left: 50px;
top: 50px;/*距離頂部，左偏移50*/
}
ul{/*背景，右邊框像素，*/
padding: 15px 0;
margin: 9;
list-style: none;
background: #6c6669;
color: #ffffff;
border-right-width: 0;
}
li{/*居中設置height和line-height相同*/
display: block;
height: 30px;
line-height: 30px;
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;
position: absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow: 2px 0 rgba(0,0,0,.3);
left: 200px;
top: 0;
box-sizing: border-box;/*盒模型*/
margin: 0px;
padding: 10px;/*內邊距*/
}
.sub_content a{
font-size: 12px;
color: #666;
text-decoration: none;/*無下劃線*/
}
.sub_content dd a{/*標題顯示*/
border-left: 1px solid #e0e0e0;
padding: 0 1px;
margin: 4px 0;
}
.sub_content dl {
overflow: hidden;
}
.sub_content dt{
float: left;
width: 70px;
font-weight: bold;
clear: left;
position: relative;
}
.sub_content dd {
float: left;
margin-left: 5px;
border-top: 1px solid #eee;
margin-bottom: 5px;
}
.sub_content dt i {
width: 4px;
height: 14px;
font:400 9px/14px consolas;
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div class="wrap" id="test">
<ul>
<li data-id = "a">
<span>家用電器</span>
</li>
<li data-id="b">
<span>手機 / 運營商 / 數碼</span>
</li>
<li data-id="c">
<span>電腦辦公 / 辦公</span>
</li>
<li data-id="d">
<span>家居 / 傢俱 / 家裝 / 廚具</span>
</li>
<li data-id="e">
<span>男裝 / 女裝 / 童裝 / 內衣 </span>
</li>
<li data-id="f">
<span>美妝個護 / 寵物 </span>
</li>
<li data-id="g">
<span>女鞋 / 箱包 / 鐘錶 / 珠寶 </span>
</li>
<li data-id="h">
<span>男鞋 / 運動 / 戶外</span>
</li>
<li data-id="i">
<span>汽車 / 汽車用品 </span>
</li>
</ul>
<!--—醫生爲一級菜單，-->
<div id="sub" class="none ">
<div id="a" class="sub_content none">
<dl>
<dt>
<a hre="#">電視<i>></i></a>
</dt>
<dd>
<a href="#">曲面電視</a>
<a href="#">超薄電視</a>
<a href="#">HDR電視</a>
<a href="#">DLED電視</a>
</dd>
<dt>
<a href="#">空調<i>></i></a>
</dt>
<dd>
<a href="#">掛壁式空調</a>
<a href="#">櫃式空調</a>
<a href="#">中央空調</a>
<a href="#">以舊換新</a>
</dd>
<dt>
<a href="#">洗衣機<i>></i></a>
</dt>
<dd>
<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="#">手機通訊<i>></i></a>
</dt>
<dd>
<a href="#">手機</a>
<a href="#">對講機</a>
<a href="#">以舊換新</a>
<a href="#">手機維修</a>
</dd>
<dt>
<a href="#">運營商<i>></i></a>
</dt>
<dd>
<a href="#">合約機</a>
<a href="#">選號機</a>
<a href="#">固定電話</a>
<a href="#">辦寬帶</a>
</dd>
<dt>
<a href="#">手機配件<i>></i></a>
</dt>
<dd>
<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="#">電腦整機<i>></i></a>
</dt>
<dd>
<a href="#">筆記本</a>
<a href="#">遊戲本</a>
<a href="#">平板電腦</a>
</dd>
<dt>
<a href="#">電腦配件<i>></i></a>
</dt>
<dd>
<a href="#">顯示器</a>
<a href="#">CPU</a>
<a href="#">主板</a>
</dd>
<dt>
<a href="#">外設產品<i>></i></a>
</dt>
<dd>
<a href="#">鼠標</a>
<a href="#">鍵盤</a>
<a href="#">鍵盤套餐</a>
</dd>
</dl>
</div>
<div id="d" class="sub_content none">
<!--
作者：[email protected]
時間：2018-07-23
描述：錯誤2;sub_content寫錯沒有用到屬性css函數。
-->
<dl>
<dt>
<a href="#">廚具<i>></i></a>
</dt>
<dd>
<a href="#">烹飪鍋具</a>
<a href="#">刀剪配件</a>
<a href="#">廚房配件</a>
<a href="#">水具酒具</a>
</dd>
<dt>
<a href="#">家紡<i>></i></a>
</dt>
<dd>
<a href="#">牀品套件</a>
<a href="#">被子</a>
<a href="#">枕芯</a>
<a href="#">蚊帳</a>
</dd>
<dt>
<a href="#">生活日用<i>></i></a>
</dt>
<dd>
<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="#">女裝<i>></i></a>
</dt>
<dd>
<a href="#">商城同款</a>
<a href="#">當季熱賣</a>
<a href="#">2017新品</a>
<a href="#">連衣裙</a>
</dd>
<dt>
<a href="#">男裝<i>></i></a>
</dt>
<dd>
<a href="#">商城同款</a>
<a href="#">當季熱賣</a>
<a href="#">2017新品</a>
<a href="#">牛仔褲</a>
</dd>
<dt>
<a href="#">童裝<i>></i></a>
</dt>
<dd>
<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="#">面部護膚<i>></i></a>
</dt>
<dd>
<a href="#">補水保溼</a>
<a href="#">卸妝</a>
<a href="#">潔面</a>
</dd>
<dt>
<a href="#">男士護膚<i>></i></a>
</dt>
<dd>
<a href="#">補水保溼</a>
<a href="#">控油</a>
<a href="#">潔面</a>
</dd>
</dl>
</div>
<div id="g" class="sub_content none">
<dl>
<dt>
<a href="#">時尚女鞋<i>></i></a>
</dt>
<dd>
<a href="#">新品推薦</a>
<a href="#">高跟鞋</a>
<a href="#">休閒鞋</a>
</dd>
<dt>
<a href="#">珠寶<i>></i></a>
</dt>
<dd>
<a href="#">黃金</a>
<a href="#">白銀</a>
<a href="#">玉石</a>
</dd>
<dt>
<a href="#">精品男包<i>></i></a>
</dt>
<dd>
<a href="#">皮包</a>
<a href="#">單包</a>
<a href="#">斜肩包</a>
</dd>
</dl>
</div>
<div id="h" class="sub_content none">
<dl>
<dt>
<a href="#">流行男鞋<i>></i></a>
</dt>
<dd>
<a href="#">新品推薦</a>
<a href="#">皮鞋</a>
<a href="#">休閒鞋</a>
</dd>
<dt>
<a href="#">運動鞋包<i>></i></a>
</dt>
<dd>
<a href="#">運動鞋</a>
<a href="#">休閒鞋</a>
<a href="#">籃球鞋</a>
</dd>
<dt>
<a href="#">體育用品<i>></i></a>
</dt>
<dd>
<a href="#">籃球</a>
<a href="#">足球</a>
<a href="#">球衣</a>
</dd>
</dl>
</div>
<div id="i" class="sub_content none">
<dl>
<dt>
<a href="#">汽車車型<i>></i></a>
</dt>
<dd>
<a href="#">小型車</a>
<a href="#">中型車</a>
<a href="#">大型車</a>
</dd>
<dt>
<a href="#">汽車價格<i>></i></a>
</dt>
<dd>
<a href="#">5萬以下</a>
<a href="#">5--10萬</a>
<a href="#">10萬以上</a>
</dd>
<dt>
<a href="#">汽車裝飾<i>></i></a>
</dt>
<dd>
<a href="#">坐墊座套</a>
<a href="#">腳墊</a>
<a href="#">滅火器</a>
</dd>
</dl>
</div>
</div>
</body>
</html>
注意二級菜單設置隱藏類，測試時候，可以先把“none”,例如
<div id="sub" class="none ">
<div id="a" class="sub_content none">中的 none去掉。
設置JS,進行二級菜單的顯示。新建js腳本文件megadropdown.js，幫助理解，註釋中按照1,2,3 的順序理解代碼。
分別是1：顯示隱藏的二級菜單。
2:加入延遲300毫秒，
3.優化點擊菜單預測。
$(document).ready(function(){/*錯誤一document寫錯。*/
var sub= $ ('#sub') /*1申明變量指向二級菜單*/
/*1定義變量一級菜單中行,以及菜單*/
var activeRow
var activeMenu
/*2在顯示二級菜單後，進行延遲問題處理，加入變量時間*/
var timer
//2鼠標在子菜單裏
var mouseInsub = false
/*最終優化問題3*/
//3給鼠標位置設置相關的數組
var mouseTrack = []
var moveHanlder = function(e){
//3利用push屬性獲得鼠標相對於頁面的座標
mouseTrack.push({
x: e.pageX,
y: e.pageY
})
//3保存有限個數組信息就好
if(mouseTrack.length>3)
{
mouseTrack.shift()
}
}
//1給鼠標把綁定事件
sub.on('mouseenter',function(e){
mouseInsub = true//進入
}).on('mouseleave',function(e){
mouseInsub = false//離開
})//1之後再進行第二次菜單欄時候，需要if判斷
$('#test')
.on('mouseenter',function(e){
/*1指向一級菜單*/
sub.removeClass('none')
$(document).bind('mousemove',moveHanlder)
})
.on('mouseleave',function(e){
sub.addClass('none')
if (activeRow){
activeRow.removeClass('active')
activeRow =null
/*1如果存在行，去掉，置空*/
}
/*1對於對應的二級菜單同樣操作*/
if(activeMenu){
activeMenu.addClass('none')
activeMenu = null
}
//3數組，處理時避免影響其他
$(document).unbind('mousemove',moveHanlder)
})/*鼠標指示時候顯示，離開的時候隱藏*/
/*2爲一級菜單中列表綁定事件。採用事件代理方式。利用事件冒泡*/
.on('mouseenter','li',function(e){
if(!activeRow)
{
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
/*2處理問題2去抖動。如果進行頻繁的操作，進行處理使其只執行最後一次*/
//計時器沒有執行時候，清理，在計時器算法結束時設置 timer=null
//debounce去抖，事件頻繁被觸動時，只執行最後一次。這裏沒有他的具體算法，只有大致原理
//53行和78行，設置if(timer)函數。
if (timer)
{
clearTimeout(timer)
}
/*3三角形區域各點座標*/
var currMousePos = mouseTrack[mouseTrack.length - 1]
var leftCorner = mouseTrack[mouseTrack.length - 2]
var delay = needDelay(sub, leftCorner,currMousePos)
//3333333
if (delay){
//3進行下一項菜單欄
//在返回return後,設置延遲300毫秒，設置一個緩衝期，當鼠標還在當前子菜單時，不會進行下一
//命令。同時聲明鼠標變量正在子菜單裏，用setTimeout來設置延遲。
timer = setTimeout(function(){
/*2如果在上一菜單子菜單裏，不處理立即返回*/
if(mouseInsub){
return
}
/*1從一級菜單到二級菜單，需要清除上一列*/
activeRow.removeClass('active')
activeMenu.addClass('none')
/*1指向當前*/
activeRow = $ (e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')/*1*/
timer = null //2去抖動時候，設置timer爲null,保障執行鼠標最後停留位置
},300)
}else{
//3這是最後指向下一菜單。
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')
}
})
})
新建functions.js腳本，利用三角形數組，優化預測鼠標指向，是最後3優化步驟。
function sameSign(a,b){
return (a ^ b) >= 0
//判斷符號是否相同
}
function vector(a,b){
return{
x: b.x - a.x,
y: b.y - a.y
}
} /*定義座標的獲取方式*/
/*三角形,向量叉乘算法*/
function vectorProduct(v1,v2){
return v1.x * v2.y - v2.x * v1.y
}
/* 二級菜單頁面（B， C）最上，最下方座標*/
function isPointInTrangle(p,a,b,c)
{
var pa = vector(p,a)
var pb = vector(p,b)
var pc = vector(p,c)
var t1 = vectorProduct(pa,pb)
var t2 = vectorProduct(pb,pc)
var t3 = vectorProduct(pc,pa)
return sameSign(t1, t2) && sameSign(t2, t3)
}
//判斷是否需要延遲。
function needDelay(elem, leftCorner, currMousePos){
var offset = elem.offset()
var topLeft = {
x: offset.left,
y: offset.top
}
var bottomLeft = {
x: offset.left,
y: offset.top +elem.height()
}
return isPointInTrangle(currMousePos, leftCorner, topLeft, bottomLeft)
}
結束。