jquery导航条悬停下划线滑出动画效果



92 365 122



特效描述:动画导航条 悬停下划线 滑出动画,query导航下划线,悬停动画,下划线动画,悬停导航。

代码结构

1. 引入JS

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

2. HTML代码

<div class="header">
	<div class="nav">
		<ul>
			<li><a href='http://www.dijiuzhanzhang.com/'>首页</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>Flash素材</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>菜单导航</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>时间日期</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>焦点图</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>tab标签</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>jquery特效</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>在线客服</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>广告代码</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>相册代码</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>图片特效</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>名站特效</a><span></span></li>
			<li><a href='http://www.dijiuzhanzhang.com/'>其他代码</a><span></span></li>
		</ul>
	</div>
</div>
<script type="text/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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到