这篇文章主要介绍了JS实现类似51job上的地区选择效果,结合完整实例形式分析了javascript基于鼠标事件响应实现页面元素动态变换的相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现类似51job上的地区选择效果。分享给大家供大家参考，具体如下：
地区选择效果 BODY { FONT-SIZE: 12px; PADDING-TOP: 50px } H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } .bton { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid } .cont { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px } #main { MARGIN: 0px auto; WIDTH: 400px } #selectItem { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px } #preview { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid } #result { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid } .tit { PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px } .bgc_ccc { BACKGROUND: #ccc } .bgc_eee { BACKGROUND: #eee } .c_999 { COLOR: #999 } .pointer { CURSOR: pointer } .left { FLOAT: left } .right { FLOAT: right } .cls { CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px } #bg { DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7 } .hidden { DISPLAY: none } .move { CURSOR: move }您已选择的城市汇总
[取消][确定] 第0层第1层第2层第3层北京 福建 四川 江苏 上海 云南 贵州 黑龙江 吉林 辽宁 美国 阿富汗 日本
您已选择的城市
运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- Jsoup获取全国地区数据属性值（省市县镇村）
- 根据IP的地址，区分不同的地区，查看不同的网站页面的js代码
- 基于json的jquery地区联动效果代码
- 根据地区不同显示时间的javascript代码
- PHP+Mysql+Ajax+JS实现省市区三级联动
- JS实多级联动下拉菜单类，简单实现省市区联动菜单！
- 最好用的省市二级联动 原生js实现你值得拥有
- js实现一个省市区三级联动选择框代码分享
- 省市区三级联动下拉框菜单javascript版
- 从QQ网站中提取的纯JS省市区三级联动菜单
- javascript支持区号输入的省市二级联动下拉菜单
- jquery调取json数据实现省市级联的方法
- javascript 09年最新版的省市联动
以上就是JS实现类似51job上的地区选择效果示例的详细内容，更多请关注本站其它相关文章！
