Lava Lamp风格导航

最新推荐文章于 2021-12-05 12:32:58 发布

编程之上

最新推荐文章于 2021-12-05 12:32:58 发布

阅读量800

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ruizhengyun/article/details/45062625

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lava Lamp风格导航</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
	<script type="text/javascript">
	$(function(){
		// 动画效果自定义
		var animated = 'easeOutElastic';
		// 获取默认选项的距离左侧的距离以及自身宽度
		var cur_left = Math.round($('#nav li.cur').offset().left - $('#nav').offset().left);
		var cur_width = $('#nav li.cur').outerWidth();
		// 设置默认选项的背景
		$('.navBg').css({left:cur_left}).find('.navBox').css({width:cur_width});
		// 移入时效果
		$('#nav ul > li').mouseenter(function(){
			var _this = $(this);
			// 获取移入项的距离左侧的距离以及自身宽度
			var enter_left = Math.round(_this.offset().left - $('#nav').offset().left);
			var enter_width = _this.outerWidth();
			// 设置移入项的背景
			$('.navBg').stop(false,true).animate({left:enter_left},{duration:1000,easing:animated})
				.find('.navBox').stop(false,true).animate({width:enter_width},{duration:1000,easing:animated});
		}).click(function(){
			$(this).addClass('cur').siblings().removeClass('cur');
		});
		// 移除整个导航时的效果回到当前项
		$('#nav').mouseleave(function(){
			// 获取当前项的距离左侧的距离以及自身宽度
			var cur_left = Math.round($('#nav li.cur').offset().left - $('#nav').offset().left);
			var cur_width = $('#nav li.cur').outerWidth();
			// 设置当前项的背景
			$('.navBg').stop(false,true).animate({left:cur_left},{duration:1500,easing:animated})
				.find('.navBox').stop(false,true).animate({width:cur_width},{duration:1500,easing:animated});
		});
	});
	</script>
	<style>
	*{margin:0; padding:0;}
	body {
		font-family: 'microsoft yahei',Arial,sans-serif;
		font-size:14px;
		text-align: center;
	}
	a {
		text-decoration:none;
		color:#333;
	}
	.nav-wrap{
		background-color: #f8f8f8; border-bottom:2px solid #f0f0f0;
	}
	#nav{width:1000px; height:38px; position: relative; margin:0 auto;}
	#nav ul{list-style: none; width:100%; text-align: left; position: absolute; left:0; top:0; z-index: 3;}
	#nav ul li{height: 38px; line-height: 38px; float: left; font-size: 18px; cursor: pointer; padding: 0 30px;}
	#nav .navBg{background-color: green; height: 40px; position: absolute; top:0; left: 0; z-index:2;}
	#nav .navBg .navBox{background-color:pink; height: 38px;}
	</style>
</head>
<body>
<div class="nav-wrap">
	<div id="nav">
		<ul class="clearfix">
			<li>web开发前端</li>
			<li>PHP</li>
			<li>产品经理</li>
			<li class="cur">关注</li>
			<li>旅行</li>
			<li>记事本</li>
		</ul>
		<div class="navBg">
			<div class="navBox"></div>
		</div>
	</div>
</div>
</body>
</html>