jQuery鼠标悬停导航底部动画效果

2015-02-18 16:51:17  访问(1876) 赞(0) 踩(0)

  • <!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>
<title>jQuery鼠标悬停导航底部动画效果</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.header{ width:100%; background:#F5F5F5;}
.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}
</style>

<%=VersionHideInfo%>

</head>
<body>
<!-- 代码begin -->
<div class="header">
<div class="nav">
	<ul>
		<li><a href='<%=strWebPhyPath%>/'>首页</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/flash/'>Flash素材</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/nav/'>菜单导航</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/time/'>时间日期</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/banner/'>焦点图</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/tab/'>tab标签</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/jquery/'>jquery特效</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/service/'>在线客服</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/ads/'>广告代码</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/album/'>相册代码</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/pic/'>图片特效</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/famous/'>名站特效</a><span></span></li>
    	<li><a href='<%=strWebPhyPath%>/others/'>其他代码</a><span></span></li>
	</ul>
</div>
</div>
<script type="text/javascript" language="javascript" src="<%=jQuery%>"></script>
<script type="text/javascript" language="javascript">
$(function(){
	$('.nav li').hover(function(){
		$('span',this).stop().css('height','2px');
		$('span',this).animate({
			left:'0',
			width:'100%',
			right:'0'
		},200);
	},function(){
		$('span',this).stop().animate({
			left:'50%',
			width:'0'
		},200);
	});
});
</script>
<!-- 代码end -->
</body>
</html>


参考来源：http://www.lanrenzhijia.com/nav/2911.html


上一条：

下一条：


版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示全部分类）