网站地图    收藏   

主页 > 前端 > javascript >

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:
                    
                    

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论