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=utf-8" />
<title>jquery熔岩灯导航菜单特效</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="images/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>

<!--演示内容开始-->
<script type="text/javascript">
$(function(){
	
	//navSlider
	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();
	
	
	// sideSlider
	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 */
.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 */
.help-side{width:184px;position:relative;margin:60px auto 0 auto;}
.help-side dl{background:url(images/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>

	<div class="nav">
		<ul>
			<li class="cur"><a href="http://www.baidu.com/jiaoben/">首 页</a></li>
			<li><a href="http://www.baidu.com/jiaoben/huandengpian.html">幻灯片代码</a></li>
			<li><a href="http://www.baidu.com/jiaoben/tupiandaima.html">图片代码</a></li>
			<li><a href="http://www.baidu.com/jiaoben/caidanhaohang.html" target=_blank>菜单导航</a></li>
			<li><a href="http://www.baidu.com/jiaoben/tupainxiangce.html">相册代码</a></li>
			<li><a href="http://www.baidu.com/jiaoben/guanggaodaima.html">广告代码</a></li>
			<li><a href="http://www.baidu.com/jiaoben/jiaodiantu.html">焦点图代码</a></li>
			<li class="last"><a href="http://www.baidu.com/jiaoben/">返回</a></li>
		</ul>
		<div class="nav-line"></div>
	</div><!--nav end-->

	<div class="help-side">
		<dl>
			<dt>js图片特效</dt>
			<dd class="cur"><a href="http://www.baidu.com/tag_jiaoben/jquery.html">jQuery特效</a></dd> 
			<dd><a href="http://www.baidu.com/tag_jiaoben/CSS3.html">CSS3特效</a></dd>    
			<dd><a href="http://www.baidu.com/tag_jiaoben/TuPianQieHuan.html">图片切换</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/BiaoDan.html">表单代码</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/HuaDong.html">滑动代码</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/GunDong.html">滚动代码</a></dd>
		</dl>
		<dl class="last">
			<dt>js导航菜单</dt>
			<dd><a href="http://www.baidu.com/tag_jiaoben/HTML5.html">HTML5代码</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/FanYe.html">翻页代码</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/JiaoDianGuangGao.html">焦点广告</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/HuaLang.html">画廊展示</a></dd>
			<dd><a href="http://www.baidu.com/tag_jiaoben/JinDuTiao.html">进度条</a></dd>
		</dl>
		<div class="side-slider"></div>
	</div><!--help-side end--> 
</body>
</html>

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