当前位置：模板网首页 > 特效插件 > 导航菜单 > 跟随鼠标的边框的导正文

跟随鼠标的边框的导航/侧边栏jQuery代码

作者：网页模板

大小：0MB

点击次数：

发布时间：2014-07-25 12:17

分享到：

特效介绍

跟随鼠标的边框的导航/侧边栏jQuery代码，鼠标移动到任意导航上，底部或者侧边的边框就会迅速滑动过去，浮上去的位置离初始位置越远，滑动速度越快。鼠标离开导航菜单，边框会“归位”。运行下面代码查看效果：

<!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代码_我爱模板 www.5imoban.net</title>  <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ //导航栏 function navSlider(){ var $nav = $('.nav'), $cur = $('.nav li.cur a'), $navLine = $('.nav-line'), $anchor = $('a',$nav.children()), curPosL = $cur.position().left, curW = $cur.outerWidth(true), curIdx = $('li.cur',$nav).index(); $navLine.css({'width':curW,'left':curPosL}); $anchor.not('li.last a',$nav).each(function(index){ var posL = $(this).position().left, w = $(this).outerWidth(true); $(this).mouseenter(function(){ $navLine.animate({'width':w,'left':posL},250); $(this).parent().addClass('cur').siblings().removeClass('cur'); }); }); $nav.mouseleave(function(){ $navLine.animate({'width':curW,'left':curPosL},250); $anchor.parent(':eq('+curIdx+')').addClass('cur').siblings().removeClass('cur'); }); }; navSlider(); //树形菜单/侧边栏 function sideSlider(){ if(!$(".help-side dl").length){ return false; } var $aCur = $(".help-side dl").find(".cur a"), $targetA = $(".help-side dl dd a"), $sideSilder = $(".side-slider"), curT = $aCur.position().top - 3; $sideSilder.stop(true, true).animate({ "top":curT }); $targetA.mouseenter(function(){ var posT = $(this).position().top - 3; $sideSilder.stop(true, true).animate({ "top":posT }, 240); }).parents(".help-side").mouseleave(function(_curT){ _curT = curT $sideSilder.stop(true, true).animate({ "top":_curT }); }); }; sideSlider(); }); </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif , "新宋体";} /*导航*/ .nav{position:relative;height:28px;width:755px;margin:60px auto 0 auto;} .nav li{float:left;margin-left:9px;display:inline;height:26px;line-height:26px;} .nav li a{padding:0 8px;font-size:14px;color:#4f6f8c;font-weight:700;text-decoration:none;} .nav li a:hover{text-decoration:none;} .nav li.last a{font-weight:normal;font-size:12px;} .nav li.cur a{color:#39aa42;} .nav .nav-line{position:absolute;border-bottom:2px solid #39aa42;height:0;overflow:hidden;left:0;bottom:0;} /*侧边栏*/ .help-side{width:184px;position:relative;margin:30px auto 0 auto;} .help-side dl{background:url(http://p1.qhimg.com/d/360browser/20121009/line02.gif) no-repeat 0 bottom;padding-bottom:14px;margin-bottom:12px;line-height:24px;} .help-side dl.last{background:none;} .help-side dl dt{font-weight:700;color:#333;} .help-side dl dd a{color:#5e5e5e;text-decoration:none;} .help-side dl dd.cur a,.help-side dl dd a:hover{color:#35C4FD;text-decoration:none;} .help-side .side-slider{position:absolute;width:3px;background:#35C4FD;height:20px;left:-18px;top:27px;} </style>  <style> body{margin:0; padding:0;} ul#wimoban_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#wimoban_nav li{float:left; display:inline; margin:10px;} ul#wimoban_nav li a{display:block; font-size:16px;} ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{color:#000; font-family:"微软雅黑";} ul#wimoban_nav li a:hover,#wimoban_p a:hover{color:red;} #wimoban_p{text-align:center; font-size:14px; clear:both;} </style> </head> <body oncontextmenu='return false' ondragstart='return false'> <ul id="wimoban_nav"> <li><a title="返回网站首页" href="http://www.5imoban.net/">首页</a></li> <li><a title="网页PSD模板下载" href="http://www.5imoban.net/psdmoban/">PSD模板</a></li> <li><a title="网页CSS模板下载" href="http://www.5imoban.net/cssmoban/">CSS模板</a></li> <li><a title="网页特效、网页插件" href="http://www.5imoban.net/texiao/">特效插件</a></li> <li><a title="整站源码下载" href="http://www.5imoban.net/yuanma/">源码下载</a></li> <li><a title="酷站欣赏" href="http://www.5imoban.net/kuzhan/">酷站欣赏</a></li> <li><a title="建站资源" href="http://www.5imoban.net/ziyuan/">建站资源</a></li> <li><a title="建站视频教程、建站教程" href="http://www.5imoban.net/jiaocheng/">建站教程</a></li> <li><a title="建站心得、互联网事、心境之旅" href="http://www.5imoban.net/article/">心境之旅</a></li> </ul>   <div class="nav"> <ul> <li class="cur"><a href="#">首页</a></li> <li><a href="#">PSD模板</a></li> <li><a href="#">javascript特效</a></li> <li><a href="#">CSS模板</a></li> <li><a href="#">html模板</a></li> <li><a href="#">html5教程</a></li> <li><a href="#">网页特效</a></li> <li class="last"><a href="http://www.5imoban.net">返回</a></li> </ul> <div class="nav-line"></div> </div>  <div class="help-side"> <dl> <dt>网页模板</dt> <dd class="cur"><a href="#">网站源码</a></dd> <dd><a href="#">免费PSD模板</a></dd> <dd><a href="#">免费CSS模板</a></dd> <dd><a href="#">免费HTML模板</a></dd> <dd><a href="#">js广告</a></dd> <dd><a href="#">js更多特效</a></dd> </dl> <dl class="last"> <dt>网页特效</dt> <dd><a href="#">导航特效</a></dd> <dd><a href="#">树形菜单</a></dd> <dd><a href="#">下拉菜单</a></dd> <dd><a href="#">右键菜单</a></dd> <dd><a href="#">更多特效</a></dd> </dl> <div class="side-slider"></div> </div>  <div id="wimoban_p"> <p>来代码整理：<a href="http://www.5imoban.net/" title="模板网" alt="模板网">我爱模板网</a></p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> </div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

具体使用方法不再赘述，上面的代码直接拷贝到您的页面即可。只需要其中一种效果，就把另一种的css、js和html代码删除即可。

本文标签：
jQuery导航

跟随鼠标的边框的导航/侧边栏jQuery代码效果预览跟随鼠标的边框的导航/侧边栏jQuery代码本地下载

跟随鼠标的边框的导航/侧边栏jQuery代码

热门网页特效

热门PSD模板

热门CSS模板

热门网站源码

热门酷站欣赏

热门建站资源

热门建站教程

热门文章