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. eclipse系列: Cannot change version of project facet Dynamic web的解决方法

    问题描述         用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servl ...

  2. Linux内核分析——第八周学习笔记20135308

    第八周 进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 1.进程调度与进程调度的时机分析 (1)进程分类 第一种分类 I/O-bound:等待I/O CPU-bound: ...

  3. 慢牛股票-基于Sencha+Cordova的股票类APP

    13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店.应用宝.百度应用商店.   慢牛是一款数据分析类的股票APP,提供数据订阅和数据分析 ...

  4. java中String类型变量的赋值问题

    第一节 String类型的方法参数 运行下面这段代码,其结果是什么? package com.test; public class Example { String str = new String( ...

  5. Library not found for -lPods 解决方法

    使用cocoapods 经常会遇到的问题. 1. Library not found for -lPods 2. Pods was rejected as an implicit dependency ...

  6. Orchard 刨析：Logging

    最近事情比较多,有预研的,有目前正在研发的,都是很需要时间的工作,所以导致这周只写了两篇Orchard系列的文章,这边不能保证后期会很频繁的更新该系列,但我会写完这整个系列,包括后面会把正在研发的东西 ...

  7. 喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less

    CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧. Less这么小个东西,竟然要FQ,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.h ...

  8. 自动备份SQL数据库到云存储Storage

    如何自动备份SQL数据库到Storage呢. 前提条件需要SQL Server2012 SP1 CU2或更高版本 1. 备份SQL Azure数据库到云存储Storage 1)在SQL Server ...

  9. [Bug]当IDENTITY_INSERT设置为OFF时，不能为表“xx”中的标识列插入显示的值

    写在前面 在设计数据库表时,将主键设置为了自增的.在使用linq to sql的时候,添加数据,出现此错误. 解决方案 找到linq to sql生成的**.dbml文件,在对应的表上面右键修改其属性 ...

  10. Javascript基础系列之（七）函数（对象和属性）

    包含在对象里的数据可以通过两种方式来访问 既属性的对象(property)和方法(method) 属性是隶属于某个特定对象的变量,方法则是某个特定对象才能调运的函数. 对象是由一些彼此相关的属性和方法 ...