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. 如何在Ubuntu 14.04中安装最新版Eclipse

    想必很多开发人员都知道,Ubuntu 软件源中提供的并不是最新版本的 Eclipse,本教程就教大家如何在 Ubuntu 14.04 中快速安装 Eclipse 官方发布的最新版本. 到目前为止,Ec ...

  2. MBProgressHUD框架的使用：https://github.com/jdg/MBProgressHUD

    MBProgressHUD是一个开源类库,实现了各种样式的提示框, 下载地址:https://github.com/jdg/MBProgressHUD,然后把两个MBProgressHUD.h和MBP ...

  3. IOS开发之——reveal 的使用

    Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...

  4. swift项目实战FoodPin目录

    好吧,据说写博客能够找到好工作,那我也来分享一个项目吧! 自己自学iOS开发也有半年多了,现在就来分享一个swift的小项目吧!这个项目的来源是<Beginning iOS8 programmi ...

  5. maven integration with eclipse 3.0.4 does not work with NTLM proxy

    Recently downloaded m2e(maven integration with eclipse). The version is 3.0.4. My environment is beh ...

  6. （旧）子数涵数·Flash——路径补间

    一.打开flash软件(图为flash8) 二.创建新项目->Flash文档 三.使用椭圆工具,绘制一个圆形图像(快捷键为O,很形象吧) 四.在后面若干帧中插入关键帧,并移动刚刚绘制好的图像的位 ...

  7. 13.C#分部类型和静态类(七章7.1-7.2)

    再大的东西不去找,也就没了,再小的知识不去记,也就忘了.今天来写一写C#中的分部类型和静态工具类,这些两个概念可能在我们的日常使用过程中都使用过,可能大家对这些内容觉得这些不是应该有的东西嘛,那就来复 ...

  8. HTML5——同步购物车

    同步购物车,及打开两个或多个界面,选择购物时同步,让显示的内容一致,这样不至于购买出错. 核心:利用storage事件和localStorage本地存储实现 图片简单展示: <!DOCTYPE ...

  9. AngularJS-入门篇

    AngularJS是什么? 既然能找到这篇日志,证明大家已经了解AngularJS了我这里也就不长篇大论的说了. 其实AngularJS就是,使用JavaScript编写的客户端技术.和Web技术( ...

  10. Mybatis出现：无效的列类型: 1111 错误

    在使用Mybatis时,不同的xml配置文件,有的会提示:无效的列类型: 1111 比如这个sql: update base.sys_person t set t.rybh=#{rybh},t.xm= ...