JS实现网页顶部向下滑出的全国城市切换导航效果


Posted in Javascript onAugust 22, 2015

本文实例讲述了JS实现网页顶部向下滑出的全国城市切换导航效果。分享给大家供大家参考。具体如下:

这是一款JS版网页顶部向下滑出的城市切换导航,仿sohu团购网页顶部的城市导航切换,从顶部向下滑出,方便在其他城市之间切换。使用了sohu网原版的一个JS封装插件来实现,目前只是为了演示,所以全国城市不全,使用者自己添加吧。

运行效果截图如下:

JS实现网页顶部向下滑出的全国城市切换导航效果

在线演示地址如下:

具体代码如下:

<!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>
<title>网页顶部向下滑出的切换城市导航</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
p{line-height:24px}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{ width:960px; text-align:left; margin:0 auto; }
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}
.header{ background:url(images/tuan_head_01.gif) repeat-x; height:32px;}
.header .topCtiy {PADDING-RIGHT: 10px; PADDING-TOP: 4px; HEIGHT: 22px}
.header .topCtiy UL {FLOAT: right}
.header .topCtiy LI {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px}
.header .topCtiy LI.i1 {PADDING-RIGHT: 13px; PADDING-LEFT: 13px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: #e16e6e; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
.header .topCtiy LI.i2 {BACKGROUND: url(images/tuan_icon10.gif) no-repeat 100% 50%; CURSOR: pointer}
.header .topCtiy LI A {COLOR: #fff}
.header .topCtiy LI A:hover {COLOR: #fff}
.selCity {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 10; BACKGROUND: url(images/tuan_bgx06.gif) #7e2725 repeat-x 50% bottom; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 2px; 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; BACKGROUND: url(images/tuan_bg15.gif) no-repeat; WIDTH: 68px; TEXT-INDENT: -3000px; HEIGHT: 21px; TEXT-DECORATION: none}
.selCity TABLE {MARGIN: 0px auto; WIDTH: 950px; BORDER-COLLAPSE: collapse}
.selCity TABLE TD {BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 157px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; 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}
.header .box {MARGIN-TOP: 36px; TEXT-ALIGN: left}
.header .lab_city {MARGIN-TOP: 1px; FLOAT: left; WIDTH: 210px; COLOR: #fff; POSITION: relative; HEIGHT: 25px}
.header .sel_fl {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #400a09; LEFT: -97px; PADDING-BOTTOM: 27px; WIDTH: 361px; PADDING-TOP: 23px; POSITION: absolute; TOP: 28px}
.header .sel_fl TABLE {BORDER-COLLAPSE: collapse}
.header .sel_fl TABLE TD {
BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 88px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; HEIGHT: 34px; TEXT-ALIGN: center}
.header .sel_fl TABLE TD.first {BORDER-LEFT-WIDTH: 0px}
.header .sel_fl TABLE TD.last {BORDER-RIGHT-WIDTH: 0px}
.header .sel_fl TABLE TD A {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}
.header .sel_fl TABLE TD A:hover {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}
.header .sel_fl TABLE TD A:hover {BACKGROUND: #5c2f2e}
.header .sel_fl TABLE TD A.cur {BACKGROUND: #5c2f2e}
.header .lab_city .city {FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(images/tuan_bg01.gif) no-repeat 100% 0px; FLOAT: left; WIDTH: 70px; LINE-HEIGHT: 25px; MARGIN-RIGHT: 16px; TEXT-ALIGN: center}
.header .lab_city .txt {DISPLAY: inline-block; CURSOR: pointer; PADDING-TOP: 8px}
</style>
</head>
<BODY>
<DIV class=selCity id=allCity style="DISPLAY: none">
<DIV class=area>
<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></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></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></TR>
 <TR>
 <TD><A href="#">长春</A></TD>
 <TD><A href="#">郑州</A></TD>
 <TD> </TD>
 <TD> </TD>
 <TD> </TD>
 <TD> </TD></TR></TBODY></TABLE>
<DIV class=none><A id=foldin href="javascript:;">收起</A></DIV></DIV></DIV>
<DIV class=header>
 <DIV class=area>
  <DIV class=r>
   <DIV class="topCtiy clear">
    <UL>
     <LI class=i1>北京 </LI>
     <LI class=i2 id=changeCity>切换城市 </LI>
    </UL>
   </DIV>
  </DIV>
 </DIV>
</DIV>
<SCRIPT src="js/sohu.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
jQuery(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>
<br /><br />
<p></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
理解Javascript闭包
Nov 01 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
layui弹出层效果实现代码
May 19 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 #Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 #Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 #Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
详解Python中的type和object
2018/08/15 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python实现名片管理系统
2018/11/29 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
高考考python编程是真的吗
2020/07/20 Python
Python map及filter函数使用方法解析
2020/08/06 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
语文教育专业应届生求职信
2013/11/23 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
2014年教研室工作总结
2014/12/06 职场文书
离婚协议书范本
2015/01/26 职场文书
二审答辩状范文
2015/05/22 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android