jQuery左侧焦点跟随导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery左侧焦点跟随导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<title>jQuery左侧焦点跟随导航菜单</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="head-warp">
  <div class="head">
    <h1><a href="#/">程序员设计师联盟淘宝店</a></h1>
    <div class="nav-box">
      <ul>                              
        <li><a href="#/" target="_blank">首页</a></li>
        <li><a href="#/" target="_blank">扩展</a></li>
        <li><a href="#/" target="_blank">皮肤</a></li>
        <li class="cur"><a href="#/" target="_blank">帮助</a></li>
        <li><a href="#/" target="_blank">论坛</a></li>
      </ul>
      <div class="nav-line" style="left: 92px; width: 64px; "></div>
    </div>
  </div>
</div>

<div class="main">
  <div class="help clearfix">
    <div class="help-side">
	 <dl>
     <dt>6.0版本变化</dt>
        <dd><a href="#">6.0版本有哪些改进</a></dd>
        <dd><a href="#">广告拦截怎么设置</a></dd>
        <dd><a href="#">Internet选项</a></dd>
        <dd><a href="#">如何提取网页上的视频</a></dd>
        <dd><a href="#">如何更改字体</a></dd>
		<dd class="cur"><a href="#">如何更改网页背景色</a></dd>
        <dd><a href="#">隔离模式找不到</a></dd>
        <dd><a href="#">se:home</a></dd>
        <dd><a href="#">使用IE下载</a></dd>
        <dd><a href="#">扩展应用找不到</a></dd>
     </dl>
      
	 <dl>
     <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="#">360用户等级有什么用</a></dd>
      </dl>
    <dl>
        <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>
        <dd><a href="#">超级拖拽</a></dd>
        <dd><a href="#">鼠标手势</a></dd>
     </dl>
      <div class="side-slider" style="top: 148px; "></div>
    </div>
  </div>
</div>
<!-- 代码 结束 -->

</body>
</html>

JS代码(zzsc.js):

(function ($){
	$(function (){
	nav();
	//��������sideSlider();
	//���������}
);
	function nav(){
	var $liCur = $(".nav-box>ul>li.cur"),curP = $liCur.position().left,curW = $liCur.outerWidth(true),$slider = $(".nav-line"),$targetEle = $(".nav-box>ul>li:not('.last')"),$navBox = $(".nav-box");
	$slider.stop(true,true).animate({
	"left":curP,"width":curW}
);
	$targetEle.mouseenter(function (){
	var $_parent = $(this);
	//.parent(),_width = $_parent.outerWidth(true),posL = $_parent.position().left;
	$slider.stop(true,true).animate({
	"left":posL,"width":_width}
,"fast");
}
);
	$navBox.mouseleave(function (cur,wid){
	cur = curP;
	wid = curW;
	$slider.stop(true,true).animate({
	"left":cur,"width":wid}
,"fast");
}
);
}
;
	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+1;
	$sideSilder.stop(true,true).animate({
	"top":curT}
);
	$targetA.mouseenter(function (){
	var posT = $(this).position().top+1;
	$sideSilder.stop(true,true).animate({
	"top":posT}
,240);
}
).parents(".help-side").mouseleave(function (_curT){
	_curT = curT$sideSilder.stop(true,true).animate({
	"top":_curT}
);
}
);
}
;
}
)(jQuery);

CSS代码(zzsc.css):

body,p,form,input,textarea,ul,li,h1,h2,h3,h4,dl,dt,dd,table,td,th{margin:0;padding:0;}
a{text-decoration:none;color:#999;outline:none;}
.main{margin:0 auto;width:980px;padding-top:42px;}
/*��������*/
.head-warp{background:#fbfbfb url(../images/head_navbg.gif) repeat-x 0 bottom;}
.head-warp .head{width:980px;margin:0 auto;background-image:none;}
.head{height:52px;padding:14px 0 1px;}
.head h1{background:url(../images/logo.png) no-repeat;height:47px;width:181px;float:left;line-height:10em;overflow:hidden;}
.head h1 a{display:block;width:100%;height:47px;}
.nav-box{float:right;position:relative;z-index:1000;}
.nav-box ul{padding-top:12px;}
.nav-box ul li{list-style:none;float:left;font:16px/41px ΢���ź�;padding:0 12px;height:41px;}
.nav-box ul li a{margin:0 4px;color:#323233;}
.nav-box ul li a:hover{text-decoration:none;}
.nav-box ul li.last{font-family:\5b8b\4f53;font-size:12px;padding-top:1px;}
.nav-box ul li.last a{color:#a2a2a1;}
.nav-box .nav-line{position:absolute;left:0;bottom:0;height:2px;line-height:2px;font-size:0;width:52px;background:#34c61c;}
/*������*/
.help{margin-bottom:102px;background:url(../images/help_line_shu.gif) repeat-y 184px 0;min-height:670px;}
.help-side{width:184px;float:left;position:relative;}
.help-side dl{background:url(../images/help_line_heng.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;font-size:14px;}
.help-side dl dd a{font-size:12px;color:#787878;}
.help-side dl dd.cur a,.help-side dl dd a:hover{color:#46a313;text-decoration:none;}
.help-side .side-slider{position:absolute;width:3px;background:#46A313;height:20px;left:-18px;top:27px;}
.help-cont{margin-left:185px;padding-left:32px;font-size:14px;color:#333;}
.help-cont h2{font-weight:normal;margin-bottom:16px;font-size:16px;font-family:΢���ź�;}
.help-cont p{line-height:24px;padding:0 0 2px;font-size:14px;}
.help-cont p a,.help-cont dl dt a{color:#0078b6;}
.help-cont dl{margin-bottom:10px;}
.help-cont dl dt{background:url(img/icon05.png) no-repeat 0 2px;padding-left:26px;margin-bottom:5px;}
.help-cont dl dd{color:#808080;line-height:22px;padding-left:26px;display:none;}
.code_box{border:1px solid #ccc;padding:10px;background:rgb(240,240,240);margin:-20px 0 10px;}
.info_table{width:100%;margin:10px 0 20px;}
.info_table,.info_table th,.info_table td{border:1px solid #ccc;text-align:left;}
.info_table th,.info_table td{padding:0 4px;line-height:22px;}

附件:下载该文件资源,减少时间成本(增值服务)