jquery图标文字滑动切换导航滚动特效代码

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

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

以下是 jquery图标文字滑动切换导航滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图标文字滑动切换导航 </title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>

<body>

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

<div class="nav">
	<ul class="clearfix">
		<li>
			<a href="#">
				<p><img src="images/nav1.jpg"  alt=""/></p>
				<div class="navdq">
					<h1>首页</h1>
					<h2>HOME</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav2.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>产品中心</h1>
					<h2>PRODUCT</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav3.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>新闻中心</h1>
					<h2>NEWS</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav4.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>校园计划</h1>
					<h2>CAMPUS</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav5.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>关于我们</h1>
					<h2>ABOUT</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav6.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>联系我们</h1>
					<h2>CONTACT</h2>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<p><img src="images/nav7.jpg"  alt=""/></p>
				<div class="navwz">
					<h1>会员中心</h1>
					<h2>MEMBERS</h2>
				</div>
			</a>
		</li>
	</ul>
</div>
</body>
</html>

JS代码(nav.js):

(function($){
	$(function(){
	$('.nav li a').hover(function(){
	$('.navwz',this).stop().fadeIn(200);
	$('.navwz h1',this).stop().animate({
	'top':'0'}
,400);
	$('.navwz h2',this).stop().animate({
	'top':'0'}
,400);
}
,function(){
	$('.navwz',this).stop().fadeOut(400);
	$('.navwz h1',this).stop().animate({
	'top':'-43px'}
,400);
	$('.navwz h2',this).stop().animate({
	'top':'43px'}
,400);
}
)qfzy();
}
)}
)(jQuery);
	function qfzy(){
	if(jQuery(window).width()>1003){
	var nav = jQuery(window).width();
}
else{
	var nav = 1003;
}
var nav_single = nav/7;
	jQuery('.nav').width(nav);
	jQuery('.nav li').width(nav_single);
}
jQuery(window).resize(function(){
	if (typeof indexSlides != 'undefined' && indexSlides.reformat)indexSlides.reformat();
	qfzy();
}
);

CSS代码(common.css):

@charset "utf-8";/* CSS Document */
.nav{border-bottom:1px solid #dfe0e2;border-top:1px solid #dfe0e2;height:43px;}
.nav li{float:left;height:43px;position:relative;overflow:hidden;}
.nav li a{width:100%;height:86px;display:block;position:absolute;left:0;top:0;}
.nav li a p{text-align:center;height:43px;background:#dfe0e2;width:100%;}
.nav li a div.navwz{height:43px;background:#fff;line-height:43px;position:absolute;display:none;width:100%;z-index:9;left:0;top:0;cursor:pointer;}
.nav li a div.navwz h1{color:#222;font-size:14px;font-weight:bold;width:49%;text-align:right;height:43px;top:-43px;position:absolute;left:0;}
.nav li a div.navwz h2{color:#222;font-weight:normal;font-size:12px;font-family:Arial;line-height:43px;width:49%;text-align:left;height:43px;top:43px;position:absolute;right:0;}
.nav li a div.navdq{height:43px;background:#fff;line-height:43px;position:absolute;width:100%;z-index:9;left:0;top:0;cursor:pointer;}
.nav li a div.navdq h1{color:#222;font-size:14px;font-weight:bold;width:49%;text-align:right;height:43px;top:0px;position:absolute;left:0;}
.nav li a div.navdq h2{color:#222;font-weight:normal;font-size:12px;font-family:Arial;line-height:43px;width:49%;text-align:left;height:43px;top:0px;position:absolute;right:0;}

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