jquery熔岩灯导航菜单动画特效代码下载


jquery熔岩灯导航菜单动画特效代码下载
jquery熔岩灯导航菜单动画特效代码下载以及熔岩灯、导航菜单动画等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<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(http://p1.51qianduan.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>
	<div class="nav">
		<ul>
			<li class="cur"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li class="last"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		<div class="nav-line"></div>
	</div><!--nav end-->
	<div class="help-side">
		<dl>
			<dt>js图片特效</dt>
			<dd class="cur"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd> 
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>    
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
		</dl>
		<dl class="last">
			<dt>js导航菜单</dt>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
			<dd><a href="https://www.51qianduan.com/" target="_blank">51前端</a></dd>
		</dl>
		<div class="side-slider"></div>
	</div><!--help-side end-->  

相关推荐

发表评论

相关文章