JS实现京东无延迟菜单效果

最新推荐文章于 2022-09-08 11:00:38 发布

世俗到天亮

最新推荐文章于 2022-09-08 11:00:38 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 算法导航栏无延迟前端开发

本文链接：https://blog.csdn.net/nlnlznl224/article/details/80241242

版权

闲暇之余看了慕课网 JS实现京东无延迟菜单效果（附慕课网视频连接： https://www.imooc.com/learn/829）

后看到了一位前辈的播客（附原播客地址：http://www.cnblogs.com/6kou/p/jd.html）

辗转反侧，狂翻百度

后研究算法，终理解其中缘由

话不多说，先附前辈代码并稍加整合(侵删)：

一：原理

1.开发基本的菜单结构
2.开发普通的二级菜单效果

3.假如延迟解决移动问题

切换子菜单时候，用setTimeout设置延迟；debounce去抖技；在事件被频繁触发是，只执行一次处理；

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

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

运用到向量
二位向量叉乘公式

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

(附算法链接：https://baike.baidu.com/item/%E5%90%91%E9%87%8F/1396519?fr=aladdin

算法： https://www.cnblogs.com/TenosDoIt/p/4024413.html）

一：HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿京东菜单无刷新导航栏</title>

    <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-con

最低0.47元/天解锁文章

世俗到天亮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现京东无延迟菜单效果

工作之余看了慕课网 JS实现京东无延迟菜单效果（附慕课网视频连接： https://www.imooc.com/learn/829）辗转反侧，跟CTO交流后看到了一位前辈的播客（附原播客地址：http://www.cnblogs.com/6kou/p/jd.html）后研究算法，终理解其中缘由话不多说，先附前辈代码并稍加整合(侵删)：一：原理 1...
复制链接

扫一扫

专栏目录