jquery導航條懸停下劃線滑出動畫效果



97 385 129



特效描述:動畫導航條 懸停下劃線 滑出動畫,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

加群請備注:從官網了解到

老夫子电子