实现京东无延迟菜单

发表于 | 分类于 | 阅读次数
undefined

额..其实这是在慕课网放了很久的课程，不过一直沉下心去学习。一直以为不就是个菜单，所以没认真对待。然而，仔细学习后，发现还是有很多门道在的。启发式编程真的好神奇，佩服这种思路~

直奔主题吧~京东的无延迟菜单有什么特点：

  • 在一级菜单滑向二级菜单的时候，鼠标不需要特意避开一级菜单可以直接移动过去（设置了延迟）
  • 在一级菜单内上下滑动的时候，不需要延迟设置。
  • 利用了向量的知识进行启发式设置延时问题。

向量启发式判断

由于用户在一级菜单移动向二级菜单的时候往往更倾向于直线移动。然而如果单单使用延时设置会造成一级菜单之间切换的延迟，典型地解决了一个问题冒出一个问题。于是就需要在延时设置的位置再加一层判断（用户到底是想要切换一级菜单还是想移动到二级菜单）

于是就利用了向量的知识。鼠标是否位于三角形内，这里建议画图理解————鼠标上一次位置，二级菜单的左上角和二级菜单的左下角三个点构成的三角形。判断鼠标当前位置是否位于这个三角形内，如果是，则判断为向二级菜单移动。否则是一级菜单之间的切换。

这种就是启发式编程，通过研究用户的正常操作行为推导出符合条件的模式~

其实这种小demo直接看代码更容易理解~
这里稍微总结一些小点：

  • 如果不是用数据控制二级菜单，每一个二级菜单要拥有一个独立的dom结构，其余内容隐藏。
  • 绑定mouseenter,mouseleave,可以确保鼠标仍旧在父元素移动的时候不会触发mouseleave。如果运用mouseover和mouseout则会出现上述问题。
  • 使用节流函数以及延迟函数。
  • 向量的知识是这个demo最重要的部分，务必理解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .w19{
    width: 200px;
  }
  .cate {
    position: relative;
    left: 100px;
    top: 100px;
  }
  .cate-menu{
    list-style: none;
  }
  .cate-menu-item{
    display: block;
    height: 40px;
    line-height: 40px;
    background: grey;
    text-indent: 2em;
  }
  .active{
    background: rgba(0,0,0,0.4);
  }
  .item-word{
    color: #fff;
    cursor: pointer;
  }
  .item-word:hover{
    color: red;
  }
  .cate_pop{
    position: absolute;
    overflow: hidden;
    top: 0;
    left:200px;
    width: 900px;
    background: rgba(0,0,0,0.05);
  }
  .cate-part, .cate-part-item{
    overflow: hidden;
  }
  .cate-part-item{
    height: 40px;
    line-height: 40px;
  }
  .cate-part-item-dt, .cate-part-item-dd{
    float: left;
  }
  .cate-part-item-dt{
    width: 80px;
    text-align: right;
  }
  .cate-part-item-dd{
  }
  .cate-part-word{
    color: black;
    text-decoration: none;
  }
  .none{
    display: none;
  }
</style>
<body>
  <div class="w19">
    <div class="cate">
      <ul class="cate-menu">
        <li class="cate-menu-item" data-id="a">
          <span class="item-word">家用电器</span>
        </li>
        <li class="cate-menu-item" data-id="b">
          <span class="item-word">家用电器</span>
        </li>
        <li class="cate-menu-item" data-id="c">
          <span class="item-word">手机/运营商/数码</span>
        </li>
        <li class="cate-menu-item" data-id="d">
          <span class="item-word">电脑/办公</span>
        </li>
        <li class="cate-menu-item" data-id="e">
          <span class="item-word">家居</span>
        </li>
      </ul>
      <div class="cate_pop none">
        <div class="cate-part none" id="a">
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
        </div>
        <div class="cate-part none" id="b">
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">家用电器 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
        </div>
        <div class="cate-part none" id="c">
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">手机 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
        </div>
        <div class="cate-part none" id="d">
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电脑 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
        </div>
        <div class="cate-part none" id="e">
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">家居 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
          <dl class="cate-part-item">
            <dt class="cate-part-item-dt">电视 &gt;</dt>
            <dd class="cate-part-item-dd">
              <a class="cate-part-word" href="#">曲面电视</a>
              <a class="cate-part-word" href="#">好电视</a>
              <a class="cate-part-word" href="#">小米电视</a>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <script src="jQuery.js" charset="utf-8"></script>
  <script>
  // 这里是向量的功能函数
    // 利用位运算符 以及 二进制第一位表示正负数的特征进行是否同符号的判断
    function sameSign(a, b) {
      return (a ^ b) >= 0
    }
    // 表示向量
    function vector(a, b) {
      return {
        x: b.x - a.x,
        y: b.y - b.x
      }
    }
    // 向量相乘
    function vectorProduct(v1, v2) {
      return v1.x * v2.y - v2.x * v1.y;
    }
    // 判断是否在三角形内
    function isPointInTriangle(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(pa, pc);
      return sameSign(t1, t2) && sameSign(t1, t3);
    }
    //  在三角形内则需要延迟
    function needDelay(dom, leftPos, curPos) {
      var offset = dom.offset();
      if (!offset) {
        return
      }
      var topPos = {
        x: offset.left,
        y: offset.top
      };
      var bottomPos = {
        x: offset.left,
        y: offset.top + dom.height()
      };
      return isPointInTriangle(curPos, leftPos, topPos, bottomPos);
    }
  </script>
  <script>
    // 外层
    var $cate = $('.cate');
    // 二级菜单的父容器
    var $cate_pop = $('.cate_pop');
    // 保存被选中的一级菜单以及二级菜单
    var $activePop;
    var $activeMenu;
    //  延迟使用的函数
    var timer;
    // 鼠标是否在二级菜单中
    var isInPop = false;
    // 用于存放鼠标的位置
    var posArr = [];
    function moveHandler(e) {
      posArr.push({
        x: e.pageX,
        y: e.pageY
      });
      // 只保存3个位置
      if (posArr.length > 3) {
        posArr.shift();
      }
    }
    // 切换菜单
    function changePop(e){
      $activePop.addClass('none');
      $activeMenu.removeClass('active');
      $activeMenu = $(e.target);
      $activePop = $('#' + $activeMenu.attr('data-id'));
      $activePop.removeClass('none');
      $activeMenu.addClass('active');
    }
    $cate
      .on('mouseenter', function() {
        $cate_pop.removeClass('none');
        // 绑定鼠标的移动，记录位置
        $(document).bind('mousemove', moveHandler);
      })
      .on('mouseleave', function() {
        $cate_pop.addClass('none');
        if ($activePop) {
          $activePop.addClass('none');
          $activePop = null;
        }
        if ($activeMenu) {
          $activeMenu.removeClass('active');
          $activeMenu = null;
        }
        $(document).unbind('mousemove', moveHandler);
        clearTimeout(timer);
      })
      $('.cate-menu')
        .on('mouseenter', '.cate-menu-item', function(e) {
          //  首次移动到菜单上，不需要延迟设置
          if (!$activePop) {
            $activeMenu = $(e.target);
            $activePop = $('#' + $activeMenu.attr('data-id'));
            $activePop.removeClass('none');
            $activeMenu.addClass('active');
            return;
          }
          // 鼠标已经在菜单上的移动操作
          // 节流函数的一部分
          if (timer) {
            clearTimeout(timer);
          }
          var curPos = posArr[posArr.length - 1];
          var leftPos = posArr[posArr.length - 2];
          var delay = needDelay($activePop, leftPos, curPos);
          // 如果在三角形内需要延迟
          if (delay) {
            timer = setTimeout(function () {
              if (isInPop) {
                return
              }
              changePop(e);
              timer = null;
            }, 300);
          } else {
            // 不需要延迟
            changePop(e);
          }
        })
    // 记录是否移动到了二级菜单上
    $('.cate_pop').on('mouseenter', function() {
      isInPop = true;
    }).on('mouseleave', function() {
      isInPop = false;
    })
  </script>
</body>
</html>