Js实现京东无延迟菜单效果实例(demo)-自学php网

Js实现京东无延迟菜单效果实例(demo)

来源：自学PHP网时间：2017-06-06 10:05 作者：阅读:次

[导读] 本篇文章主要介绍了Js实现京东无延迟菜单效果实例(demo) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

这是一个js实现京东无延迟菜单效果，感觉很好，分享给大家...

先来理清思路:

1.开发基本的菜单结构

2.开发普通的二级菜单效果

3.假如延迟解决移动问题，切换子菜单时候，用setTimeout设置延迟

debounce去抖技，在事件被频繁触发是，只执行一次处理

4.解决延迟引入的新问题

跟踪鼠标的移动，用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较

运用到向量

二位向量叉乘公式

用叉乘法判断点在三角形内

最终效果：鼠标自然的移动和点击到子菜单

切换时无延迟

下面开始代码：

开发基本的菜单结构

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>京东菜单无刷新</title>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script src="js/mche.js"></script>
  <script src="js/function.js"></script>

  <style>
    .wrap{
      position:relative;
      width:200px;
      left:50px;
      top:50px;
    }

    ul{
      padding:15px;
      margin:9;
      list-style:none;
      background:#6c6669;
      color:#ffffff;
      border-right-width:0;
    }

    /*水平居中*/
    li{
      display:block;
      height:30px;
      line-height: 30px;
      padding-left:12px;
      cursor:pointer;
      font-size: 14px;
      position:relative;
    }

    /*鼠标移动上去的背景色*/
    li.active{
      background:#999395;
    }
  
    /*js可以很好地调用类，一般效果css实现就好*/
    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-style: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:

javascript实现延时显示提示框效果

ES6中箭头函数的定义与调用方式详解

子栏目

Js实现京东无延迟菜单效果实例(demo)

最新评论

添加评论

更多文章推荐

添加评论