鼠标移到菜单上弹出二级菜单特效_鼠标触摸弹出界面资源-CSDN下载

共4个文件

js：2个

html：1个

png：1个

需积分: 50 22 浏览量 2016-04-12 18:27:36 上传评论收藏 41KB ZIP 举报

在网页设计和开发中，创建交互式的用户界面是至关重要的，这可以提升用户体验并使网站更具吸引力。"鼠标移到菜单上弹出二级菜单特效"是一个常见的网页交互元素，尤其适用于导航菜单。这种特效通常用于当用户将鼠标悬停在主菜单项上时，会展示出与之相关的子菜单项，以便用户能够更快速地访问他们感兴趣的内容。在实现这个特效时，主要涉及到JavaScript的事件处理机制，包括`mouseover`和`mouseout`事件。`mouseover`事件在鼠标指针进入某个元素时触发，而`mouseout`事件则在鼠标指针离开该元素时触发。通过巧妙地结合这两个事件，我们可以控制二级菜单的显示和隐藏。在描述中提到的"timeout原理"，可能是指延迟执行某些操作，例如使用`setTimeout`函数。在鼠标悬停事件中，如果立即弹出二级菜单，可能会因为用户的鼠标快速移动导致菜单频繁闪烁。为了解决这个问题，开发者可以设置一个短暂的延迟，在这段时间内如果鼠标仍然停留在主菜单上，才显示二级菜单。这样可以提高交互的稳定性。具体实现时，首先需要在HTML中定义菜单结构，每个一级菜单项包含相应的二级菜单。然后，使用CSS来设定初始的隐藏状态（如使用`display: none`）和鼠标悬停时的显示样式。接着，使用JavaScript为一级菜单项添加事件监听器，监听`mouseover`和`mouseout`事件。在`mouseover`事件的回调函数中，调用`setTimeout`设置一个定时器，准备在指定时间后显示二级菜单。而在`mouseout`事件的回调函数中，可以清除已设置的定时器，防止二级菜单意外显示。如果鼠标已经离开一级菜单但仍在二级菜单范围内，可以添加额外的条件判断来避免二级菜单的关闭。为了增加更好的用户体验，还可以考虑以下优化点： 1. 添加动画效果，如淡入淡出，平滑过渡等，使菜单的显示和隐藏更自然。 2. 考虑触摸设备的兼容性，适配触屏操作。 3. 针对不同屏幕尺寸进行响应式设计，确保在不同设备上都能良好工作。 4. 添加防抖或节流功能，防止在鼠标快速移动时频繁触发事件。通过以上分析，我们可以了解到实现"鼠标移到菜单上弹出二级菜单特效"涉及到的技术点，包括JavaScript事件、CSS样式控制以及用户体验优化。在实际项目中，根据具体需求和场景，可能还需要进行更复杂的逻辑处理和功能扩展。

资源详情

资源评论

资源推荐

收起资源包目录

鼠标移到菜单上弹出二级菜单特效_Followmenu.zip （4个子文件）

Followmenu

images

nav_on.png 6KB

tab.js 238B

jquery.min.js 90KB

index.html 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery鼠标经过背景跟随滑动的导航菜单 - 代码家园</title> <script language="JavaScript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { //$("#mainbox").hide(); var navLi = $("#nav-div ul li"), navUl = $("#nav-div ul"), speed = 200; function OnClick(){ n = navUl.find("li.on").index(); navUl.stop().animate({backgroundPosition:navLi.width()*n},speed); } OnClick(); navLi.hover( function(){ n = $(this).index(); navUl.stop().animate({backgroundPosition:navLi.width()*n},speed); }, function(){ OnClick(); }) navLi.click(function(){ $(this).addClass("on").siblings().removeClass("on") }); $(window).scroll(function() { if($(window).scrollTop() > $("#nav").height()+50){ $("#nav").addClass("scoll_nav") } else{ $("#nav").removeClass( "scoll_nav") } }); }) </script> <script type="text/javascript"> // window.tabHanlerId = null; function setTab(name,cursel,n){ // _clearTabHanler(); // for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } }; // 鼠标移入conTwoTabs时 function conTwoTabsMouseover(){ // _clearTabHanler(); // 判断ID,然后设置上方hover 的样式 }; // 清除 function _clearTabHanler(){ if(window.tabHanlerId){ window.clearTimeout(window.tabHanlerId); window.tabHanlerId = null; } }; // 延迟隐藏Tab function hideTab(){ // _clearTabHanler(); window.tabHanlerId = window.setTimeout(_hideTab, 70); // function _hideTab(){ // var name = 'two'; var n = 4; // for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=""; con.style.display="none"; } }; }; </script> <style type="text/css"> body, html { padding: 0; margin: 0; } a { text-decoration: none; color: #FFF; font-weight: bold; font-size: 14px; } div, ul, li { padding: 0; margin: 0; } ul { list-style: none; } /*选项卡2*/ #Tab2 { width: 576px; margin: 0px; padding: 0px; margin: 0 auto; } .con_two_tabs { height : 100px; } /*菜单class*/ .Menubox { width: 100%; background: url(bg2.gif); height: 28px; line-height: 28px; } .Menubox ul { margin: 0px; padding: 0px; } .Menubox li { float: left; display: block; cursor: pointer; width: 114px; text-align: center; color: #949694; font-weight: bold; } .Menubox li.hover { padding: 0px; background: #fff; width: 116px; border-left: 1px solid #A8C29F; border-top: 1px solid #A8C29F; border-right: 1px solid #A8C29F; background: url(bg1.gif); color: #739242; font-weight: bold; height: 27px; line-height: 27px; } .Contentbox { clear: both; margin-top: 0px; border: 1px solid #A8C29F; border-top: none; height: 181px; text-align: center; padding-top: 0px; } #nav-div { width: 1020px; height: 42px; background: #1BA2E1; margin: auto; position: relative; } ul { width: 100%; height: 42px; list-style: none; cursor: pointer; background: url(images/nav_on.png) no-repeat; } #nav-div ul li { width: 100px; height: 42px; line-height: 42px; text-align: center; margin: auto; float: left; color: #FFF; cursor: pointer; } #nav-div ul li:hover a { color: #FF6; } #liItemPaner { width: 100px; height: 40px; background: #FC0; position: absolute; } .nav-side { width: 1020px; margin: auto; height: 42px; background: #1BA2E1; } .scoll_nav { width: 100%; position: fixed; top: 10px; z-index: 10000; } #nav .nav-on { color: #F00; } </style> </head> <body> <br> <br> <br> <div class="top"></div> <div id="nav" class="nav-side"> <div id="nav-div"> <ul> <li class="on"><a href="#" target="_blank">门户首页</a></li> <li id="two1" onmouseout="hideTab()" onmouseover="setTab('two',1,4)"><a href="https://www.baidu.com/" target="_blank">口岸资讯</a></li> <li id="two2" onmouseout="hideTab()" onmouseover="setTab('two',2,4)"><a href="https://www.baidu.com/" target="_blank">政务中心</a></li> <li id="two3" onmouseout="hideTab()" onmouseover="setTab('two',3,4)"><a href="https://www.baidu.com/" target="_blank">用户服务</a></li> <li id="two4" onmouseout="hideTab()" onmouseover="setTab('two',4,4)"><a href="https://www.baidu.com/" target="_blank">口岸协会</a></li> <li><a href="https://www.baidu.com/" target="_blank">综合查询</a></li> <li><a href="https://www.baidu.com/" target="_blank">招商引资</a></li> <li><a href="https://www.baidu.com/" target="_blank">通关服务</a></li> </ul> </div> <div id="mainbox" class="Contentbox"> <div id="con_two_1" class="con_two_tabs" onmouseout="hideTab()" onmouseover="conTwoTabsMouseover()" style="display:none">鼠标指向变换鼠标指向变换同一页面只需更改ID可以重复使用鼠标指向变换同一页面只需更改ID可以重复使用1</div> <div id="con_two_2" class="con_two_tabs" onmouseout="hideTab()" onmouseover="conTwoTabsMouseover()" style="display:none">鼠标指向变换鼠标指向变换同一页面只需更改ID可以重复使用鼠标指向变换同一页面只需更改ID可以重复使用2</div> <div id="con_two_3" class="con_two_tabs" onmouseout="hideTab()" onmouseover="conTwoTabsMouseover()" style="display:none">鼠标指向变换鼠标指向变换同一页面只需更改ID可以重复使用鼠标指向变换同一页面只需更改ID可以重复使用3</div> <div id="con_two_4" class="con_two_tabs" onmouseout="hideTab()" onmouseover="conTwoTabsMouseover()" style="display:none">鼠标指向变换鼠标指向变换同一页面只需更改ID可以重复使用鼠标指向变换同一页面只需更改ID可以重复使用4</div> </div> </div> 0000000 </body> </html>