豎排主選單滑鼠滑動角度判斷顯示子分類

在較多電商類**中，總會有豎排主類別選單，滑鼠滑動右側顯示分類下的詳細類別，但因為是豎排分類，就可能會出現滑鼠滑動時，只是想單純的在露出的詳細分類下，點選當前分類下的某個分類，但是因為滑鼠滑動經過了其他分類，子分類選單就被切換走了，只能滑鼠平移至右側，使用者體驗是極不好的。

比如下圖在選擇了「女鞋/箱包/鐘錶/珠寶」這個分類後，滑鼠正常從上方按箭頭方向滑動到「2017新品」時，在不做角度等輔助判斷下，滑鼠因為經過了「美妝個護/寵物」選單後，右側的分類就被切換走了（右側顯示了「美妝個護/寵物」的子分類），選右側的東西完全靠滑鼠平移，想想心也是塞的呢。

所以在這種情況下，我們需要對滑鼠滑動的角度和停留時間進行判斷，判斷使用者想要的操作是否是切換至其他分類，來進行切換。

從兩個方面來判斷切換最為穩妥，判斷滑鼠滑動角度和滑鼠停留時長。

判斷滑鼠滑動角度

對於角度的計算考慮到各種數值約等於其實蠻複雜的，我覺得（什麼正弦、余弦的，想想腦袋都大了），所以可以依靠斜率來判斷角度，看是否進行切換。

記錄滑鼠移動的初識位置 a和最終位置b的座標，以初始位置為圓心做座標軸，計算兩點構成直線的斜率（kab）進行下一步的操作。

在起始位置 a建立座標軸，參照下圖，對最終位置所在位置應當觸發的情況進行邏輯梳理：

1.不需要進行選單切換

當滑鼠最終位置在座標系 1 , 2 區域，預設選單欄在主選單右側，雖然滑鼠方向是向下或者向上進行了滑動，但是我們先預設使用者是想點選右側子選單下方和上方的專案，所以暫不進行切換。

當滑鼠最終位置在座標軸 x軸上時，因為左右區域都算是當前主選單欄目的子元素，所以也不進行切換。

2.需要進行選單切換

當滑鼠最終位置在座標系 3, 4 區域，預設選單欄在主選單右側，因為滑鼠方向是向左下或者向左上進行了滑動，沒有任何往右側子選單移動的意圖，所以是進行切換。

當滑鼠最終位置在座標軸 y軸上時，垂直上下的移動表明使用者就是想切換選單，所以進行切換。

3.隱藏分類

當滑鼠在menu區域移除時，當前展示的子選單應當隱藏不在顯示。

根據上面的邏輯梳理，我們編寫以下核心邏輯**：

1 $(document).ready(function
());
15//
只儲存三個位置資訊，超出刪除第乙個元素
16if(site.length > 3)
1920
});21
22//
計算斜率 返回是否切換分類
23 var getslope = function
(set)
33//
如果滑鼠進行了 豎向平移 或 橫向平移 或 近乎於縱向平移 時正常進行切換，不進行接下來的判斷
34if(sitearr.x1 == sitearr.x2 || sitearr.y1 ==sitearr.y2 || math.abs(sitearr.x2 - sitearr.x1) <= 10)
37//
我們以滑鼠初始位置 座標所在的垂直豎線為基線 ，若滑鼠移動的方向在 基線左側，而我們的子選單在右側，說明使用者想要切換主選單，所以也正常進行切換，不進行接下來的判斷
38if(sitearr.x2 
41//
set 為當前主選單欄目項，我們判斷滑鼠的起始位置是否在主選單欄目的外的左側和欄目外的右側，如果在說明使用者剛移入主選單，應進行切換，不進行接下來的判斷
42if(sitearr.x1 < set.left || sitearr.x1 >set.lx)
45//
求斜率46
var k = (sitearr.y2-sitearr.y1)/(sitearr.x2-sitearr.x1);
47//如果斜率不為0 則夾角不為0，則不進行切換
48if
(k)51 }else54}
55

判斷滑鼠停留時長當使用者在主選單乙個子欄目中停留300ms，我們就認為使用者是想進行切換檢視其它子選單。

所以之前上面

豎排主選單滑鼠滑動角度判斷顯示子分類

Android之動畫主選單

AwesomeMenu,仿Path主選單效果

touchmove滑動選單

豎排主選單滑鼠滑動角度判斷顯示子分類

Android之動畫主選單

AwesomeMenu,仿Path主選單效果

touchmove滑動選單

相關推薦