前端学习之，昨日模仿的，js二级菜单无延迟仿京东

2024-01-03 20:40
文章标签 学习 js 前端 frontend 二级 菜单 延迟 京东 模仿 昨日

本文主要是介绍前端学习之，昨日模仿的，js二级菜单无延迟仿京东，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

学习慕课网https://www.imooc.com/learn/829学习js实现京东无延迟菜单效果。

 

首先是主页目录设置。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-2.1.1.min.js"></script><script src="js/megadropdown.js"></script><script src="js/functions.js"></script><style type="text/css">.wrap{position: relative;//设置定位width: 200px;left: 50px;top: 50px;/*距离顶部，左偏移50*/}	ul{/*背景，右边框像素，*/padding: 15px 0;margin: 9;list-style: none;background: #6c6669;color: #ffffff;border-right-width: 0;}li{/*居中设置height和line-height相同*/display: block;height: 30px;line-height: 30px;padding-left: 12px;cursor:pointer;/**/font-size: 14px;position: relative;}li.active{background: #999395;}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-size: 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: 4px;height: 14px;font:400 9px/14px consolas;position: absolute;right: 5px;top: 5px;}</style></head><body><div class="wrap" id="test"><ul><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><li data-id="i"><span>汽车 / 汽车用品  </span>    </li></ul><!--—医生为一级菜单，--><div id="sub" class="none "><div id="a" class="sub_content none"><dl><dt><a hre="#">电视<i>&gt;</i></a></dt><dd><a href="#">曲面电视</a><a href="#">超薄电视</a><a href="#">HDR电视</a><a href="#">DLED电视</a></dd><dt><a href="#">空调<i>&gt</i></a></dt><dd><a href="#">挂壁式空调</a><a href="#">柜式空调</a><a href="#">中央空调</a><a href="#">以旧换新</a></dd><dt><a href="#">洗衣机<i>&gt</i></a></dt><dd><a href="#">滚筒式洗衣机</a><a href="#">洗烘一体机</a><a href="#">波轮洗衣机</a><a href="#">迷你洗衣机</a></dd></dl></div><div id="b" class="sub_content  none"><dl><dt><a href="#">手机通讯<i>&gt</i></a></dt><dd><a href="#">手机</a><a href="#">对讲机</a><a href="#">以旧换新</a><a href="#">手机维修</a></dd><dt><a href="#">运营商<i>&gt</i></a></dt><dd><a href="#">合约机</a><a href="#">选号机</a><a href="#">固定电话</a><a href="#">办宽带</a></dd><dt><a href="#">手机配件<i>&gt</i></a></dt><dd><a href="#">手机壳</a><a href="#">贴膜</a><a href="#">手机存储卡</a><a href="#">数据线</a></dd></dl></div><div id="c" class="sub_content none"><dl><dt><a href="#">电脑整机<i>&gt</i></a></dt><dd><a href="#">笔记本</a><a href="#">游戏本</a><a href="#">平板电脑</a></dd><dt><a href="#">电脑配件<i>&gt</i></a></dt><dd><a href="#">显示器</a><a href="#">CPU</a><a href="#">主板</a></dd><dt><a href="#">外设产品<i>&gt</i></a></dt><dd><a href="#">鼠标</a><a href="#">键盘</a><a href="#">键盘套餐</a></dd></dl></div><div id="d" class="sub_content none"><!--作者：2026087978@qq.com时间：2018-07-23描述：错误2;sub_content写错没有用到属性css函数。--><dl><dt><a href="#">厨具<i>&gt</i></a></dt><dd><a href="#">烹饪锅具</a><a href="#">刀剪配件</a><a href="#">厨房配件</a><a href="#">水具酒具</a></dd><dt><a href="#">家纺<i>&gt</i></a></dt><dd><a href="#">床品套件</a><a href="#">被子</a><a href="#">枕芯</a><a href="#">蚊帐</a></dd><dt><a href="#">生活日用<i>&gt</i></a></dt><dd><a href="#">收纳用品</a><a href="#">雨伞雨具</a><a href="#">净化除味</a><a href="#">浴室用品</a></dd></dl></div><div id="e" class="sub_content none"><dl><dt><a href="#">女装<i>&gt</i></a></dt><dd><a href="#">商城同款</a><a href="#">当季热卖</a><a href="#">2017新品</a><a href="#">连衣裙</a></dd><dt><a href="#">男装<i>&gt</i></a></dt><dd><a href="#">商城同款</a><a href="#">当季热卖</a><a href="#">2017新品</a><a href="#">牛仔裤</a></dd><dt><a href="#">童装<i>&gt</i></a></dt><dd><a href="#">卫衣</a><a href="#">裤子</a><a href="#">套装</a><a href="#">外套</a></dd></dl></div><div id="f" class="sub_content none"><dl><dt><a href="#">面部护肤<i>&gt</i></a></dt><dd><a href="#">补水保湿</a><a href="#">卸妆</a><a href="#">洁面</a></dd><dt><a href="#">男士护肤<i>&gt</i></a></dt><dd><a href="#">补水保湿</a><a href="#">控油</a><a href="#">洁面</a></dd></dl></div><div id="g" class="sub_content none"><dl><dt><a href="#">时尚女鞋<i>&gt</i></a></dt><dd><a href="#">新品推荐</a><a href="#">高跟鞋</a><a href="#">休闲鞋</a></dd><dt><a href="#">珠宝<i>&gt</i></a></dt><dd><a href="#">黄金</a><a href="#">白银</a><a href="#">玉石</a></dd><dt><a href="#">精品男包<i>&gt</i></a></dt><dd><a href="#">皮包</a><a href="#">单包</a><a href="#">斜肩包</a></dd></dl></div><div id="h" class="sub_content none"><dl><dt><a href="#">流行男鞋<i>&gt</i></a></dt><dd><a href="#">新品推荐</a><a href="#">皮鞋</a><a href="#">休闲鞋</a></dd><dt><a href="#">运动鞋包<i>&gt</i></a></dt><dd><a href="#">运动鞋</a><a href="#">休闲鞋</a><a href="#">篮球鞋</a></dd><dt><a href="#">体育用品<i>&gt</i></a></dt><dd><a href="#">篮球</a><a href="#">足球</a><a href="#">球衣</a></dd></dl></div><div id="i" class="sub_content none"><dl><dt><a href="#">汽车车型<i>&gt</i></a></dt><dd><a href="#">小型车</a><a href="#">中型车</a><a href="#">大型车</a></dd><dt><a href="#">汽车价格<i>&gt</i></a></dt><dd><a href="#">5万以下</a><a href="#">5--10万</a><a href="#">10万以上</a></dd><dt><a href="#">汽车装饰<i>&gt</i></a></dt><dd><a href="#">坐垫座套</a><a href="#">脚垫</a><a href="#">灭火器</a></dd></dl></div></div></body>
</html>

注意二级菜单设置隐藏类，测试时候，可以先把“none”,例如    
            <div id="sub" class="none ">
                <div id="a" class="sub_content none">中的 none去掉。

设置JS,进行二级菜单的显示。新建js脚本文件megadropdown.js，帮助理解，注释中按照1,2,3 的顺序理解代码。

分别是1：显示隐藏的二级菜单。

            2:加入延迟300毫秒，

            3.优化点击菜单预测。

$(document).ready(function(){/*错误一document写错。*/var sub= $ ('#sub') /*1申明变量指向二级菜单*//*1定义变量一级菜单中行,以及菜单*/var activeRow   var activeMenu/*2在显示二级菜单后，进行延迟问题处理，加入变量时间*/var timer  //2鼠标在子菜单里var mouseInsub = false/*最终优化问题3*///3给鼠标位置设置相关的数组var mouseTrack = []var moveHanlder = function(e){//3利用push属性获得鼠标相对于页面的坐标mouseTrack.push({x: e.pageX,y: e.pageY})//3保存有限个数组信息就好if(mouseTrack.length>3){mouseTrack.shift()}}//1给鼠标把绑定事件sub.on('mouseenter',function(e){mouseInsub = true//进入}).on('mouseleave',function(e){mouseInsub = false//离开})//1之后再进行第二次菜单栏时候，需要if判断$('#test').on('mouseenter',function(e){/*1指向一级菜单*/sub.removeClass('none')$(document).bind('mousemove',moveHanlder)}).on('mouseleave',function(e){sub.addClass('none')if (activeRow){activeRow.removeClass('active')activeRow =null /*1如果存在行，去掉，置空*/}/*1对于对应的二级菜单同样操作*/if(activeMenu){activeMenu.addClass('none')activeMenu = null}//3数组，处理时避免影响其他$(document).unbind('mousemove',moveHanlder)})/*鼠标指示时候显示，离开的时候隐藏*//*2为一级菜单中列表绑定事件。采用事件代理方式。利用事件冒泡*/.on('mouseenter','li',function(e){if(!activeRow){activeRow = $(e.target).addClass('active')activeMenu = $('#' + activeRow.data('id'))activeMenu.removeClass('none')return}/*2处理问题2去抖动。如果进行频繁的操作，进行处理使其只执行最后一次*///计时器没有执行时候，清理，在计时器算法结束时设置 timer=null//debounce去抖，事件频繁被触动时，只执行最后一次。这里没有他的具体算法，只有大致原理//53行和78行，设置if(timer)函数。if (timer){clearTimeout(timer)}/*3三角形区域各点坐标*/var currMousePos = mouseTrack[mouseTrack.length - 1]var leftCorner = mouseTrack[mouseTrack.length - 2]var delay = needDelay(sub, leftCorner,currMousePos)//3333333if (delay){//3进行下一项菜单栏//在返回return后,设置延迟300毫秒，设置一个缓冲期，当鼠标还在当前子菜单时，不会进行下一//命令。同时声明鼠标变量正在子菜单里，用setTimeout来设置延迟。timer = setTimeout(function(){/*2如果在上一菜单子菜单里，不处理立即返回*/if(mouseInsub){return}/*1从一级菜单到二级菜单，需要清除上一列*/activeRow.removeClass('active')activeMenu.addClass('none')/*1指向当前*/activeRow = $ (e.target)activeRow.addClass('active')activeMenu = $('#' + activeRow.data('id'))activeMenu.removeClass('none')/*1*/timer = null  //2去抖动时候，设置timer为null,保障执行鼠标最后停留位置},300)}else{//3这是最后指向下一菜单。var prevActiveRow = activeRowvar prevActiveMenu = activeMenuactiveRow = $(e.target)activeMenu = $('#' + activeRow.data('id'))prevActiveRow.removeClass('active')prevActiveMenu.addClass('none')activeRow.addClass('active')activeMenu.removeClass('none')}})})

新建functions.js脚本，利用三角形数组，优化预测鼠标指向，是最后3优化步骤。

function sameSign(a,b){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 
}/* 二级菜单页面（B， C）最上，最下方坐标*/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(pc,pa)return sameSign(t1, t2) && sameSign(t2, t3)}//判断是否需要延迟。
function needDelay(elem, leftCorner, currMousePos){var offset = elem.offset()var topLeft = {x: offset.left,y: offset.top}var bottomLeft = {x: offset.left,y: offset.top +elem.height()}return isPointInTrangle(currMousePos, leftCorner, topLeft, bottomLeft)
}

结束。

 

 

这篇关于前端学习之，昨日模仿的，js二级菜单无延迟仿京东的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/566995。

相关文章

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2