650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201203/112009966.png" />

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. 

  5. <title>仿51job.com城市选择框特效</title>
    6. 

  6. <style type="text/css">
    7. 

  7. <!--
    8. 

  8. body{padding-top:50px;font-size:12px;}
    9. 

  9. h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}
    10. 

  10. .bton{border:1px solid #CCC;background:#DDD;}
    11. 

  11. .cont{padding:10px;}
    12. 

  12. #main{width:400px;margin:0px auto;}
    13. 

  13. #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}
    14. 

  14. #preview{margin:1px;border:1px solid #CCC;}
    15. 

  15. #result{border:1px solid #CCC;margin-top:10px;}
    16. 

  16. .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}
    17. 

  17. .bgc_ccc{background:#CCC;}
    18. 

  18. .bgc_eee{background:#eee;}
    19. 

  19. .c_999{color:#999}
    20. 

  20. .pointer{cursor:pointer;}
    21. 

  21. .left{float:left;}
    22. 

  22. .right{float:right;}
    23. 

  23. .cls{clear:both;font-size:0px;height:0px;overflow:hidden;}
    24. 

  24. #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}
    25. 

  25. .hidden{display:none;}
    26. 

  26. .move{cursor:move;}
    27. 

  27. -->
    28. 

  28. </style>
    29. 

  29. </head>
    30. 

  30. <body>
    31. 

  31. <div id="main">
    32. 

  32. <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>
    33. 

  33. <div id="result">
    34. 

  34. <div class="tit bgc_eee">
    35. 

  35. <h2>您已选择的城市汇总</h2>
    36. 

  36. </div>
    37. 

  37. <div class="cont" id="makeSureItem">
    38. 

  38. </div>
    39. 

  39. </div>
    40. 

  40. </div>
    41. 

  41. <div id="bg">
    42. 

  42. </div>
    43. 

  43. <div id="selectItem" class="hidden">
    44. 

  44. <div class="tit bgc_ccc move" onmousedown="drag(event,this)">
    45. 

  45. <h2 class="left">请选择城市</h2>
    46. 

  46. <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>
    47. 

  47. <span class="pointer right" onclick="makeSure();">[确定]</span>
    48. 

  48. </div>
    49. 

  49. <div class="cls"></div>
    50. 

  50. <div class="cont">
    51. 

  51. <div id="selectSub">
    52. 

  52. <div id="c00">
    53. 

  53. <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京
    54. 

  54. <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建
    55. 

  55. <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川
    56. 

  56. <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏
    57. 

  57. </div>
    58. 

  58. <div id="c01">
    59. 

  59. <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海
    60. 

  60. <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南
    61. 

  61. <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州
    62. 

  62. </div>
    63. 

  63. <div id="c02">
    64. 

  64. <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江
    65. 

  65. <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林
    66. 

  66. <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁
    67. 

  67. </div>
    68. 

  68. <div id="c03">
    69. 

  69. <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国
    70. 

  70. <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗
    71. 

  71. <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本
    72. 

  72. </div>
    73. 

  73. </div>
    74. 

  74. </div>
    75. 

  75. <div id="preview">
    76. 

  76. <div class="tit bgc_eee c_999">
    77. 

  77. <h2>您已选择的城市</h2>
    78. 

  78. </div>
    79. 

  79. <div class="cont" id="previewItem">
    80. 

  80. </div>
    81. 

  81. </div>
    82. 

  82. </div>
    83. 

  83. <script type="text/javascript">
    84. 

  84. /* ------使用说明----- */
    85. 

  85. /*
    86. 

  86. 添加城市方法：
    87. 

  87. 添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
    88. 

  88. 添加二级傅选矿选项
    89. 

  89. 复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。
    90. 

  90. */
    91. 

  91. var grow = $("selectSub").getElementsByTagName("option").length; //组数
    92. 

  92. var showGrow = 0;//已打开组
    93. 

  93. var selectCount = 0; //已选数量
    94. 

  94. showSelect(showGrow);
    95. 

  95. var items = $("selectSub").getElementsByTagName("input");
    96. 

  96. //alert(maxItem);
    97. 

  97. //var lenMax = 2;
    98. 

  98. //alert(1);
    99. 

  99. function $(o){ //获取对象
    100. 

  100. if(typeof(o) == "string")
    101. 

  101. return document.getElementById(o);
    102. 

  102. return o;
    103. 

  103. }
    104. 

  104. function openBg(state){ //遮照打开关闭控制
    105. 

  105. if(state == 1)
    106. 

  106. {
    107. 

  107. $("bg").style.display = "block";
    108. 

  108. var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
    109. 

  109. //alert(document.body.offsetHeight);
    110. 

  110. //alert(document.documentElement.offsetHeight);
    111. 

  111. $("bg").style.height = h + "px";
    112. 

  112. }
    113. 

  113. else
    114. 

  114. {
    115. 

  115. $("bg").style.display = "none";
    116. 

  116. }
    117. 

  117. }
    118. 

  118. function openSelect(state){ //选择城市层关闭打开控制
    119. 

  119. if(state == 1)
    120. 

  120. {
    121. 

  121. $("selectItem").style.display = "block";
    122. 

  122. $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
    123. 

  123. $("selectItem").style.top = document.body.scrollTop + 100 + "px";
    124. 

  124. }
    125. 

  125. else
    126. 

  126. {
    127. 

  127. $("selectItem").style.display = "none";
    128. 

  128. }
    129. 

  129. }
    130. 

  130. function showSelect(id){
    131. 

  131. for(var i = 0 ; i < grow ;i++)
    132. 

  132. {
    133. 

  133. $("c0" + i).style.display = "none";
    134. 

  134. }
    135. 

  135. $("c0" + id).style.display = "block";
    136. 

  136. showGrow = id;
    137. 

  137. }
    138. 

  138. function open(id,state){ //显示隐藏控制
    139. 

  139. if(state == 1)
    140. 

  140. $(id).style.display = "block";
    141. 

  141. $(id).style.diaplay = "none";
    142. 

  142. }
    143. 

  143. function addPreItem(){
    144. 

  144. $("previewItem").innerHTML = "";
    145. 

  145. var len　= 0 ;
    146. 

  146. for(var i = 0 ; i < items.length ; i++)
    147. 

  147. {
    148. 

  148. if(items[i].checked == true)
    149. 

  149. {
    150. 

  150. //len++;
    151. 

  151. //if(len > lenMax)
    152. 

  152. //{
    153. 

  153. // alert("不能超过" + lenMax +"个选项！")
    154. 

  154. // return false;
    155. 

  155. //}
    156. 

  156. var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
    157. 

  157. $("previewItem").innerHTML += mes;
    158. 

  158. //alert(items[i].value);
    159. 

  159. }
    160. 

  160. }
    161. 

  161. }
    162. 

  162. function makeSure(){
    163. 

  163. //alert(1);
    164. 

  164. //$("makeSureItem").innerHTML = $("previewItem").innerHTML;
    165. 

  165. openBg(0);
    166. 

  166. openSelect(0);
    167. 

  167. copyItem("previewItem","makeSureItem")
    168. 

  168. }
    169. 

  169. function copyHTML(id1,id2){
    170. 

  170. $(id2).innerHTML = $("id1").innerHTML;
    171. 

  171. }
    172. 

  172. function copyItem(id1,id2){
    173. 

  173. var mes = "";
    174. 

  174. var items2 = $(id1).getElementsByTagName("input");
    175. 

  175. for(var i = 0 ; i < items2.length ; i++)
    176. 

  176. {
    177. 

  177. if(items2[i].checked == true)
    178. 

  178. {
    179. 

  179. mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;
    180. 

  180. }
    181. 

  181. }
    182. 

  182. $(id2).innerHTML = "";
    183. 

  183. $(id2).innerHTML += mes;
    184. 

  184. //alert($(id2).innerHTML);
    185. 

  185. }
    186. 

  186. function same(ck){
    187. 

  187. for(var i = 0 ; i < items.length ; i++)
    188. 

  188. {
    189. 

  189. if(ck.value == items[i].value)
    190. 

  190. {
    191. 

  191. items[i].checked = ck.checked;
    192. 

  192. }
    193. 

  193. }
    194. 

  194. }
    195. 

  195. /* 鼠标拖动 */
    196. 

  196. var oDrag = "";
    197. 

  197. var ox,oy,nx,ny,dy,dx;
    198. 

  198. function drag(e,o){
    199. 

  199. var ee = e ? e : event;
    200. 

  200. var mouseD = document.all ? 1 : 0;
    201. 

  201. if(e.button == mouseD)
    202. 

  202. {
    203. 

  203. ooDrag = o.parentNode;
    204. 

  204. //alert(oDrag.id);
    205. 

  205. ox = e.clientX;
    206. 

  206. oy = e.clientY;
    207. 

  207. }
    208. 

  208. }
    209. 

  209. function dragPro(e){
    210. 

  210. if(oDrag != "")
    211. 

  211. {
    212. 

  212. var ee = e ? e : event;
    213. 

  213. //$(oDrag).style.left = $(oDrag).offsetLeft + "px";
    214. 

  214. //$(oDrag).style.top = $(oDrag).offsetTop + "px";
    215. 

  215. dx = parseInt($(oDrag).style.left);
    216. 

  216. dy = parseInt($(oDrag).style.top);
    217. 

  217. //dx = $(oDrag).offsetLeft;
    218. 

  218. //dy = $(oDrag).offsetTop;
    219. 

  219. nx = e.clientX;
    220. 

  220. ny = e.clientY;
    221. 

  221. $(oDrag).style.left = (dx + ( nx - ox )) + "px";
    222. 

  222. $(oDrag).style.top = (dy + ( ny - oy )) + "px";
    223. 

  223. ox = nx;
    224. 

  224. oy = ny;
    225. 

  225. }
    226. 

  226. }
    227. 

  227. document.onmouseup = function(){oDrag = "";}
    228. 

  228. document.onmousemove = function(event){dragPro(event);}
    229. 

  229. </script>
    230. 

  230. </body>
    231. 

  231. </html>

仿51job.com城市选择框特效的更多相关文章

  1. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  2. jquery如何实现动态增加选择框

    jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...

  3. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  6. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  7. android wheelview实现三级城市选择

    很早之前看淘宝就有了ios那种的城市选择控件,当时也看到网友有分享,不过那个写的很烂,后来(大概是去年吧),我们公司有这么一个项目,当时用的还是网上比较流行的那个黑框的那个,感觉特别的丑,然后我在那个 ...

  8. 【React】开发一个城市选择控件

    想到做这个,是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题 ...

  9. java基础68 JavaScript城市联动框（网页知识）

    1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

随机推荐

  1. 微信公众平台开发之微信access_token如何有效长期保存

    随着微信使用越来越广泛,微信公众平台开放了许多接口以提供更多个性化的服务,包括自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发者在调用这些接口时,都需要传入一个相同的参数ac ...

  2. [CareerCup] 11.3 Search in Rotated Sorted Array 在旋转有序矩阵中搜索

    11.3 Given a sorted array of n integers that has been rotated an unknown number of times, write code ...

  3. LeetCode 笔记27 Two Sum III - Data structure design

    Design and implement a TwoSum class. It should support the following operations: add and find. add - ...

  4. Linux（9.21-9.27）学习笔记

    一.Vim的基本操作. Normal模式下 1.h 键 向左移动光标   2.  j  键  向下移动光标   3. k 键 向上移动光标 4. l键  向右移动光标 5.x 键  删除光标所在位置的 ...

  5. 20155301-滕树晨 第二次随笔作业--从现有技能获取的经验应用于JAVA中

    第二次随笔--从现有技能获取的经验应用于JAVA中 你有什么技能比大多人(超过90%以上)更好? 这个想了半天,有一个是我乒乓球还是比较擅长的,在学校里可能比百分之90的人要强,在外面肯定是不如了.再 ...

  6. Android中的异步网络请求

    本篇文章我们来一起写一个最基本的Android异步网络请求框架,借此来了解下Android中网络请求的相关姿势.由于个人水平有限,文中难免存在疏忽和谬误,希望大家可以指出,谢谢大家:) 1. 同步网络 ...

  7. 端口扫描之王——nmap入门精讲（二）

    接着讲上节的内容,上节中提到了一个时间优化的问题是使用参数-n,通过不解析地址来进行优化时间的,但是优化时间的方法还有很多,比如说我们可以通过时间优化(0-5),指定单位时间内的探针数,设置组的大小 ...

  8. Boostrap(3)

    常用标签 1.文字 p标签(段落) small标签(让文字呈现灰色) em标签(文字斜体) blokcquote标签(文字内容为引用时用该标签) class=”pull-right"右浮动 ...

  9. JavaScript基础---语言基础（4）

    函数,对象和数组 学习要点: 1.函数声明 2.return返回值 3.arguments对象 4.Object类型 5.Array类型 6.对象中的方法 函数是定义一次但却可以调用或执行任意多次的一 ...

  10. DOM系列---DOM操作样式

    发文不易,若转载传播,请亲注明出处,谢谢! 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有 ...