首页 > 代码库 > jquery 滑块导航菜单
jquery 滑块导航菜单
带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：
图片效果不行，直接上代码：
<body> <div class="nav"> <span>aaa</span> <span>bbb</span> <span>ccc</span> <span>ddd</span> <div class="nav_bj"></div> </div></body>
.nav{ width:1000px; text-align:center; background:#666666; margin:0 auto; position:relative;}.nav span{ width:250px; height:41px; line-height:41px; display:inline-block; position:relative; z-index:11111; color:#FFF; cursor:pointer;}.nav_bj{ background:#0099FF; width:250px; height:41px; position:absolute; top:0; z-index:111; left:0px;}
$(function(){ var x,re,nowX; nowX = 0; $(".nav span").mouseover(function(){ x=$(this).position().left; $(".nav_bj").animate({left:x}) clearTimeout(re); }).mouseout(function(){ clearTimeout(re); re=setTimeout(function(){ $(".nav_bj").animate({left:nowX}) },500); }); $(".nav span").click(function(){ nowX = $(this).position().left; $(".nav_bj").css("left",nowX); });})
需要引用 jQuery ，这种导航条和淘宝已买到的宝贝如出一辙，可用相似方式实现。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。