jquery鼠标悬停导航下划线滑出特效代码

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

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

以下是 jquery鼠标悬停导航下划线滑出特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery鼠标悬停导航下划线滑出效果</title>
<style>
*{ 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>
</head>
<body>
<!-- 代码begin -->
<div class="header">
<div class="nav">
	<ul>
		<li><a href='#'>首页</a><span></span></li>
    	<li><a href='#'>Flash素材</a><span></span></li>
    	<li><a href='#'>菜单导航</a><span></span></li>
    	<li><a href='#'>时间日期</a><span></span></li>
    	<li><a href='#'>焦点图</a><span></span></li>
    	<li><a href='#'>tab标签</a><span></span></li>
    	<li><a href='#'>jquery特效</a><span></span></li>
    	<li><a href='#'>在线客服</a><span></span></li>
    	<li><a href='#'>广告代码</a><span></span></li>
    	<li><a href='#'>相册代码</a><span></span></li>
    	<li><a href='#'>图片特效</a><span></span></li>
    	<li><a href='#'>名站特效</a><span></span></li>
    	<li><a href='#'>其他代码</a><span></span></li>
	</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(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>
</body>
</html>

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