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 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP 中文处理技巧
2010/04/25 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue-cli配置文件——config篇
2018/01/04 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
微信小程序实现自定义底部导航
2020/11/18 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python求最大连续子数组的和
2018/07/07 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
研讨会主持词
2014/04/02 职场文书
社会实践评语
2014/04/28 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
css弧边选项卡的项目实践
2023/05/07 HTML / CSS