无延迟菜单 JQuery

最新推荐文章于 2021-05-14 09:25:08 发布
最新推荐文章于 2021-05-14 09:25:08 发布
阅读量156 收藏
点赞数
分类专栏： 项目 JQuery 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43264596/article/details/84037743
版权

1、实现分类导航菜单的基本布局结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        .wrap{
            position: relative;/*为了使菜单是相对于这个div容器定位的而不是相对于body*/
            width: 200px;
            left: 50px;
            top:50px;
        }
        ul{
            padding: 15px 0;
            margin:9;
            list-style: none;
            background-color: #CC33FF;
            color: #FFFFFF;
            border-right-width: 0;
        }
        li{
            display: block;
            height: 30px;
            line-height: 30px;/*实现垂直居中的一种方法 行高和高度相等*/
            padding-left: 12px;
            cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
            font-size: 14px;
            position: relative;
        }
        /*当样式的切换需要用到Js来配合的时候就添加类，因为Js可以很方便的添加或移动类，如果不需要的话就用Hover来控制*/
        li.active{
            background-color: #FFFF66;
        }
        li span:hover{
            color: coral;
        }
        .none{
            display: none;
        }
        #sub{
            width: 600px;
            position: absolute;
            border: 1px solid #f7f7f7;
            background: #f7f7f7;
            box-shadow:2px 0 5px  #99CC33;/*加阴影*/
            left:200px;
            top: 0;
            box-sizing: border-box;/*您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。盒模型采用Border-box*/
            margin: 0;
            padding: 10px;

        }
        .sub_content a{
            font-size: 12px;
            color: #0000CC;
            text-decoration: none;/*去掉下划线*/
            border-left: 1px solid #99CC33;
            padding: 0 10px;
            margin: 4px 0;
        }
        .sub_content dl{
            /*因为DL中间会有浮动元素，所以加入overflow：hidden来触发bfc令他可以被浮动元素撑开而不是失去自己的高度*/
            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;/*分号前面代表font-size  分好后面代表line-height*/
            position: absolute;
            right: 5px;
            top:5px;
        }
    </style>
</head>
<body>
<!--承载菜单-->
<div class="wrap">
    <!--用无序列表实现一级菜单-->
    <ul>
        <!--加入id用来与二级菜单进行区分-->
        <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>
    </ul>
    <div id="sub" class="">
        <!--二级菜单的id与一级菜单的id一一对应 方便用DataSet来控制-->
        <div id="a" class="sub_content ">
            <dl>
            <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
            <dt><!--标题-->
                <a href="#">1<i>&gt;</i></a>
            </dt>
            <dd><!--子内容-->
                <a href="#">1.1</a>
                <a href="#">1.2</a>
                <a href="#">1.3</a>
            </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">2<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">2.1</a>
                    <a href="#">2.2</a>
                    <a href="#">2.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">3<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">3.1</a>
                    <a href="#">3.2</a>
                    <a href="#">3.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">4<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">4.1</a>
                    <a href="#">4.2</a>
                    <a href="#">4.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">5<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">5.1</a>
                    <a href="#">5.2</a>
                    <a href="#">5.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">6<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">6.1</a>
                    <a href="#">6.2</a>
                    <a href="#">6.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">7<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">7.1</a>
                    <a href="#">7.2</a>
                    <a href="#">7.3</a>
                </dd>
            </dl>
            <dl>
                <!--在HTML里面不能直接写箭头，因为会跟元素标签的箭头混了，用这种方式<i>&gt;</i>-->
                <dt><!--标题-->
                    <a href="#">8<i>&gt;</i></a>
                </dt>
                <dd><!--子内容-->
                    <a href="#">8.1</a>
                    <a href="#">8.2</a>
                    <a href="#">8.3</a>
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>

2、开发普通二级菜单
2.1、事件代理方式进行绑定
2.2、mouseenter和mouseover的区别
使用mouseover/mouseout时，如果鼠标移动到子元素上，即便没有离开父元素，也会触发父元素的mouseout事件；
使用mouseenter/mouseleave时，如果鼠标没有离开父元素，在其子元素上任意移动，也不会触发mouseleave事件

$(document).ready(function(){
    var sub = $("#sub");
    var activeRow;
    var activeMenu;

    $("#test").on('mouseenter',function (e) {
        sub.removeClass('none')
    }).on('mouseleave',function(e){
        sub.addClass('none');
        /*当鼠标离开一级菜单容器的时候,如果存在激活的行，要把样式去掉*/
        if(activeRow){
            activeRow.removeClass('active')
            activeRow=null;
        }
        if(activeMenu){
            activeMenu.addClass('none')
            activeMenu = null;
        }
    })
    //对一级菜单中的每一个列表项绑定事件，采用事件代理的方式进行绑定 并不是利用循环
        .on('mouseenter','li',function (e) {
             //当前移动过去的时候并没有激活的列表项
            if(!activeRow){
                activeRow=$(e.target).addClass('active')
                activeMenu = $('#'+ activeRow.data('id'))
                activeMenu.removeClass('none')
                return;
            }
            activeRow.removeClass()
        })
});

利用延迟和去抖技术进行优化
1、切换子菜单的时候用SetTimeout设置延迟
2、debounce（js里面常用）去抖技术，在事件被频繁触发时，只进行一次处理

   if (timer){
                clearTimeout(timer)
            }
            timer = setTimeout(function(){
                if (mouseInSub){
                    return
                }
                activeRow.removeClass('active');
                activeMenu.addClass('none');

                activeRow = $(e.target);
                activeRow.addClass('active');
                activeMenu = $('#'+activeRow.data('id'))
                activeMenu.removeClass('none')
                timer=null
            },300)

3、基于用户行为预测的切换技术
新增function.js

function sameSign(a,b) {
    //二进制的政府表示在最高位，1标识负，0标识整  儿异或运算只有两个都为0时才是0
    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;
}
//叉乘公式的判断方法
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(pa,pc)

    //使用位运算的技巧来判断是否符号一致
    return sameSign(t1,t2) && sameSign(t2,t3)
}
//写一个函数来判断是否需要延迟
function needDelay(elem,leftCorner,currMousrPos) {
    //利用jQuery的offset方法获取鼠标所在位置的上下边缘坐标
    var offset =elem.offset();

    var topLeft = {
        x:offset.left,
        y:offset.top
    }
    var bottomLeft = {
        x:offset.left,
        y:offset.top + elem.height()
    }
    return isPointinTrangle(currMousrPos,leftCorner,topLeft,bottomLeft)

}

TabTest.js修改

var currMousePos = mouseTrack[mouseTrack.length -1]
            var leftCorner = mouseTrack[mouseTrack.length -2]

            var delay = needDelay(sub,leftCorner,currMousePos)
            //如果在三角形内
            if (delay){
                timer = setTimeout(function(){
                    if (mouseInSub){
                        return
                    }
                    activeRow.removeClass('active');
                    activeMenu.addClass('none');

                    activeRow = $(e.target);
                    activeRow.addClass('active');
                    activeMenu = $('#'+activeRow.data('id'))
                    activeMenu.removeClass('none')
                    timer=null
                },300)
            }else{
                //如果不在三角形内直接进行菜单的切换
                var preveActiveRow = activeRow;
                var preveActiveMenu = activeMenu;

                activeRow = $(e.target)
                activeMenu = $('#'+activeRow.data('id'))

                preveActiveRow.removeClass('active');
                preveActiveMenu.addClass('none');

                activeRow.addClass('active')
                activeMenu.removeClass('none');
            }
百奇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 导航栏功能实现（高亮/相应菜单映射内容/无延迟二级菜单）
肉卷
09-20 4124
引入：导航栏的功能繁多，选取了几个常用的效果做个练手。 （忽然发现jQuery真的巨好用。。。对于新手的我，造轮子什么的，相当痛苦。我还有救么。。） 好了，总结完睡觉去了。 很多废话，看实现方法和代码就好了 功能1：鼠标滑过菜单高亮显示 实现方法：CSS ：hover伪类 一般来说，用户只是在选择进入某一菜单时（未点击）会用到此功能。所以实现起来简单。 功能2：鼠标点击后，菜单保持高亮并跳转到相...
Js实现京东无延迟菜单效果实例(demo)
12-07
在实现京东无延迟菜单效果时，首先我们需要构建一个基本的HTML菜单结构。在这个例子中，我们看到一个`<div>`元素（class为`wrap`）包裹了一个`<ul>`列表，列表中的每个`<li>`元素代表一级菜单项，而二级菜单则通过...
京东无延迟菜单实现
weixin_34133829的博客
01-11 115
一、分析 segmentfault.com/a/119000001… 二、慕课网视频分析原理 https:/www.imooc.com/qadetail/247033 三、源码 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <tit...
js小实例--无延迟菜单效果
哆来咪er的博客
01-31 666
待续...
JS实现无延迟级联菜单
qq_27905183的博客
05-07 824
1.一般的级联菜单，当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验：我们必须在这个li元素上平行的移动鼠标，才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下，将会显示其他的二级菜单了2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片3.实现代码://前端页面 <!DOCTYPE html PUBLIC "-
以京东为例简单无延迟菜单实现（一）
yao_zhanzhan的博客
03-19 347
以京东为例简单无延迟菜单实现 从页面上看，主要由两个菜单组成，当鼠标移动到主菜单上时，子菜单便会显示，这种显示显然是具有无延迟性 对于主菜单采用一个div包含内容，并采用无序列表ul -<div class="demo1"><ul> <li data-id="a"> <span>家用电器</span> </li> <l...
Js实现京东无延迟菜单效果(demo)
u011927449的博客
01-20 237
一个端午节，外面人山人海，又那么热，我认为宅在家里看看慕课网，充实自己来的实际... 这是一个js实现京东无延迟菜单效果，感觉很好，分享给大家... 先来理清思路: 1.开发基本的菜单结构 2...
基于jQuery实现的菜单切换效果
10-23
通过合理布局和交互设计，我们可以创建出一种流畅、无延迟的菜单切换效果，这在电商网站或其他需要清晰导航的Web应用中尤其有价值。理解并掌握这一技术，对于提升网站的用户界面（UI）和用户体验（UX）有着重要的...
利用jquery+jdMenu实现下拉菜单
09-08
本教程将详细介绍如何利用jQuery库结合jdMenu插件来创建浮动式、下拉式菜单，实现鼠标悬停时子菜单的动态展开效果。 首先，我们需要了解jQuery，这是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理、...
CSS3菜单项宽度渐变动画.zip
最新发布
11-16
name`, `animation-duration`, `animation-timing-function`, `animation-delay`以及`animation-iteration-count`，使得菜单项在鼠标悬停时播放`widthChange`动画，持续1秒，采用`ease-in-out`速度曲线，无延迟，...
非常好看的下拉菜单
09-11
对于更复杂的下拉菜单，如多级或带有悬停效果的，可以使用JavaScript或jQuery来实现动态显示和隐藏子菜单。 在“下拉菜单高度”这个标签中，我们关注的是下拉菜单的垂直空间管理。合理设定下拉菜单的高度可以避免...
【前端笔记】慕课网—无延迟二级菜单加载及demo
w8897282的博客
01-02 914
前记 演示效果 重点 所需框架 实现笔记 html 左半边的一级菜单布局使用ul和li标签代码片段 右边二级菜单的html结构 CSS样式 JS 代码前记演示效果重点1、页面布局及CSS知识2、如何实现无延迟加载所需框架Jquery实现笔记html左半边的一级菜单，布局使用ul和li标签，代码片段： <ul> <li data-id="a">
React-Draggable组件使用时遇到的问题
qq_43264596的博客
12-02 4582
最近使用react-draggable来满足项目上要进行表格拖拽的要求，在使用过程中发现再第一次使用拖拽的时候位置是不对的，会跳到页面的左上角也就是位置(0,0)，很突然，后来大佬帮忙解决的问题出现在这个表格我同时还是用了dom-align来初始化第一次的位置，这个dom-align使用了一个参数，useCSSTransform 就是这个参数 导致React-draggable初始化的时候不对，因...
mapshaper使用记录
qq_43264596的博客
10-09 4003
要分离出某个省的个别区域 先用disslove命令行进行合并 举例把无锡和苏州市在江苏省分离出来步骤为： 1、在区域选择器网页选择下载江苏省的json数据 然后打开json数据进行编辑，在需要合并的json串中加入"alias":“无锡区域”, 保存后将这个json导入mapshaper这个网页 点击右上角Console调出控制台，输入命令行 然后就能得到文件 无锡区域.json 得到的...
umi根据后台传过来的菜单动态渲染路由
qq_43264596的博客
05-14 3710
项目记录 使用同一个模板的路由有 属性 说明 默认值 IndexListView 业绩指标（未改版前）、经营业绩 经营质量 现金流分析 降杠杆减负债、房地产、PPP 、业务概况（海外） Business 板块分布（海外）业务分布 OtherListView 两金集中管理（其他：金融业务）、信贷管理（其他：金融业务） 创新金融（其他：金融业务） 担保管理（其他：金融业务） 科技创新（创新发展）、人员概况（创新发展） ...
新建一个umi-block（区块）的步骤
qq_43264596的博客
01-06 3520
项目需要 要新建一个区块作为目录 每个区块独立运行，刚拿到手一脸懵逼，赶紧去umiJS官网官网地址 查看了下文档 上面说用yarn create umi --type=block 这个命令行可以进行新建区块 感觉so easy 然后就兴致冲冲的去我的文件夹目录新建了个文件夹 用了这个命令 结果 报错了 我的心好痛 又去网上搜索找半天终于找到个可以解决的办法 赶紧来CSDN记录一下 首先全...
关于前端下载图片打压缩包的办法---JSZip
qq_43264596的博客
08-08 2754
最近项目需求是要将echart图片批量下载下来并且打包成zip包 咨询公司大佬以后给了个解决办法 用jsZip这个工具 git地址是：https://stuk.github.io/jszip/ 简单好用非常好理解，只需要引入jsZip以后将要下载的图片的base64码、图片名称、图片类型等传入就好了 具体代码附上 import JSZip from 'jszip'; const zip = ne...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值