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>
</head>
<body>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<div class="selcity" id="allCity" style="display:none;">
	<table>
		<tbody>
			<tr>
				<td><a class="cur" href="#">北京</a></td>
				<td><a href="#">上海</a></td>
				<td><a href="#">广州</a></td>
				<td><a href="#">深圳</a></td>
				<td><a href="#">重庆</a></td>
				<td><a href="#">西安</a></td>
			</tr>
			<tr>
				<td><a href="#">天津</a></td>
				<td><a href="#">南京</a></td>
				<td><a href="#">成都</a></td>
				<td><a href="#">武汉</a></td>
				<td><a href="#">杭州</a></td>
				<td><a href="#">济南</a></td>
			</tr>
			<tr>
				<td><a href="#">哈尔滨</a></td>
				<td><a href="#">厦门</a></td>
				<td><a href="#">海南</a></td>
				<td><a href="#">沈阳</a></td>
				<td><a href="#">大连</a></td>
				<td><a href="#">石家庄</a></td>
			</tr>
			<tr>
				<td><a href="#">长春</a></td>
				<td><a href="#">郑州</a></td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
	</table>
	<div class="none"><a id="foldin" href="javascript:;">收起</a></div>
</div>

<div class="header">
	<div class="topctiy">
		<ul>
			<li class="i1">北京 </li>
			<li class="i2" id="changeCity">切换城市</li>
		</ul>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$("#changeCity").click(function(a){
		$("#allCity").slideDown(300);
		a.stopPropagation();
		$(this).blur()
	});
	
	$("#allCity").click(function(a){
		a.stopPropagation()
	});
	
	$(document).click(function(a){
		a.button!=2&&$("#allCity").slideUp(300)
	});
	
	$("#foldin").click(function(){
		$("#allCity").slideUp(300)
	});
	
});
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
table{border-collapse:collapse;border-spacing:0;}
/* header */
.header{background:url(../images/tuan_head_01.gif) repeat-x;height:32px;}
.header .topctiy{height:22px;padding:4px 10px 0 0;}
.header .topctiy ul{float:right}
.header .topctiy li{padding:0 10px;display:inline;float:left;margin-left:3px;color:#fff;line-height:22px;}
.header .topctiy li.i1{padding:0px 13px;font-weight:bold;font-size:14px;background:#e16e6e;}
.header .topctiy li.i2{cursor:pointer}
.header .topctiy li a{color:#fff}
.header .topctiy li a:hover{color:#fff}
/* selcity */
.selcity{padding:2px 0 4px 0;z-index:10;background:#7e2725;position:relative;}
.selcity .none{left:47.5%;bottom:-18px;position:absolute}
.selcity .none a{display:block;background:url(../images/tuan_bg15.gif) no-repeat;width:68px;text-indent:-3000px;height:21px;text-decoration:none}
.selcity .none a:hover{display:block;text-indent:-3000px;height:21px;text-decoration:none}
.selcity table{margin:0px auto;width:950px;border-collapse:collapse}
.selcity table td{border:#8b3d3b 1px dashed;font-size:14px;vertical-align:middle;width:157px;color:#fff;height:39px;text-align:center}
.selcity table td a{display:block;color:#fff;line-height:40px;height:40px;text-decoration:none}
.selcity table td a:hover{background:#a86e6d;color:#fff;text-decoration:none}
.selcity table td a.cur{background:#a86e6d}

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