纯CSS弹出层实现城市切换效果
javascript
python
shell
powershell
python模块
php编程
php实例
asp.net
正则表达式
nginx
apache
linux
linux命令
centos
ubuntu
mysql
sql数据库
css教程
首页
脚本编程
网站编程
数据库
系统管理
服务器管理
网页教程
软件教程
电脑教程
手机教程
工具软件
电子书籍
php实例
shell脚本
jquery选择器
python模拟登录
linux命令
nginx
apache
当前位置：
首页
>
脚本特效
>
网页布局
> 正文
纯CSS弹出层实现城市切换效果
发布时间：2020-11-09
编辑：
脚本学堂
纯CSS弹出层，实现城市切换效果，兼容IE6/IE7/IE8，IE9未做测试。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>纯CSS弹出层效果</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <style type="text/css"> .f_l {float:left;} .f_r {float:right;} .city {height:60px;padding-left:10px;text-align:center;} .city_now {width:60px;padding-top:20px;color:#595756;font-size:16px;letter-spacing:3px;font-weight:bold;} .city_box {text-align:center;} .city_box span {vertical-align:bottom;} .city_nav {text-align:center;height:18px;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:18px;color:#333;cursor:pointer;overflow:hidden;display:inline-block;} .city_hover {color:#f25000;height:18px;line-height:18px;overflow:hidden;} .city_link {background:#FFFFFF;border:#f25000 2px solid;width:305px;display:none;z-index:9999;} .city_hovers {display:block;position:absolute;} .city_links {width:60px;margin-right:1px;height:30px;line-height:30px;font-size:13px;text-align:center;background:#f6f6f6;vertical-align:top;margin-bottom:1px;display:inline-block;} .city_show {background:#ccc;height:18px;line-height:18px;padding:5px;cursor:pointer;} </style> <body> <div class="city f_l"> <div class="city_now">北京</div> <div class="city_swich"> <span class="city_nav" id="city_nav" onclick="this.className='city_nav city_hover';document.getElementById('city_link').className='city_link city_hovers'">[切换城市]</span></div><!-- onmouseover= /vs/onclick= --> <div id="city_link" class="city_link"> <div class="city_show"><span class="f_red f_r" href="<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>:;" title="关闭窗口" onclick="document.getElementById('city_nav').className='city_nav';document.getElementById('city_link').className='city_link';return !1;">[关闭]</span><span class="f_l f_red"><a href="{$EXT[wap_url]}" target="_blank">欢迎使用！</a></span></div> <a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','0');return false;">全国</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','1');return false;">北京</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','2');return false;">上海</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','3');return false;">深圳</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','4');return false;">广州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','5');return false;">西安</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','6');return false;">杭州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','7');return false;">长沙</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','8');return false;">重庆</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','9');return false;">宁波</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','10');return false;">成都</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','11');return false;">青岛</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','12');return false;">南京</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','13');return false;">昆明</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','14');return false;">武汉</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','15');return false;">天津</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','16');return false;">合肥</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','17');return false;">郑州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','18');return false;">沈阳</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','19');return false;">大连</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','20');return false;">福州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','21');return false;">苏州</a><span class="city_links"> </span><span class="city_links"></span><span class="city_links"></span> </div> </div> </body> </html>
提示：可修改代码后再运行!
上一篇：
Jquery控制显示隐藏层
下一篇：
jQuery实现的地图热点效果
与 纯CSS弹出层实现城市切换效果 有关的文章
基于jquery实现的可自动判断位置的弹出层代码，
jQuery实现的地图热点效果
jquery带动画的弹出层(仿新浪微博)
鼠标悬停显示提示信息窗口，基于jQuery的层特效
纯javascript实现的网页标签，斑马线，遮罩层、弹
类似新浪微博的弹出框，可拖拽
运用jquery实现的点击弹出层效果
本文标题：
纯CSS弹出层实现城市切换效果
本页链接：
http://www.jb200.com/tx/50.html
浏览排行
1
使用jquery实现的可伸缩与展开的层控制面板
2
基于jQuery的面板收缩与展开的特效
3
Jquery控制显示隐藏层
4
基于jquery实现的div层沿不同方向移动的动画
5
时间可控的jquery层的show和hide效果
6
鼠标悬停显示提示信息窗口，基于jQuery的层
7
基于jquery实现的可自动判断位置的弹出层代
8
jQuery控制DIV由大到小，由远及近的变化
9
两例Div平行不覆盖
10
基本的网页选项卡代码
栏目分类
菜单导航
网页布局
背景特效
广告代码
图片特效
CSS相关
日期时间
文本链接
表单及按钮
表格相关
计算转换
其它
栏目导航
脚本
服务器
数据库
python
linux
linux命令
shell脚本
javascript
javascript数组
jquery
jquery选择器
jquery事件
jquery菜单
python列表
python爬虫
python模拟登录
php编程
php教程
php面试题
php随机数
php数组
php分页
php正则
php排序
asp.net
批处理
正则表达式
mysql
mysql分页
mysql存储过程
mysql日志
mysql教程
sql数据库
nginx
apache
手机教程
热点文章
1
基本的网页选项卡代码
2
鼠标悬停显示提示信息窗口，基于jQuery的层
3
jQuery滚动层，仿QQ在线客服
4
Js动画提示层，可合拢伸开的JS层效果
5
纯CSS3做的Logo效果
6
鼠标滑过，文字展开，基于jQuery插件实现的
7
一款借助jquery实现的简易的层面板的展开与
关于本站
|
网站地图
|
联系我们
|
免责声明
|
友情链接
鄂ICP备13010364号-22
CopyRight © 2010-2021
脚本学堂
Jb200.com , All Rights Reserved.
