zoukankan      html  css  js  c++  java

  • 仿51job.com城市选择框特效

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. <head> 
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. <title>仿51job.com城市选择框特效</title> 
    6. <style type="text/css"> 
    7. <!-- 
    8. body{padding-top:50px;font-size:12px;} 
    9. h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;} 
    10. .bton{border:1px solid #CCC;background:#DDD;} 
    11. .cont{padding:10px;} 
    12. #main{400px;margin:0px auto;} 
    13. #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;400px;z-index:2;} 
    14. #preview{margin:1px;border:1px solid #CCC;} 
    15. #result{border:1px solid #CCC;margin-top:10px;} 
    16. .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;} 
    17. .bgc_ccc{background:#CCC;} 
    18. .bgc_eee{background:#eee;} 
    19. .c_999{color:#999} 
    20. .pointer{cursor:pointer;} 
    21. .left{float:left;} 
    22. .right{float:right;} 
    23. .cls{clear:both;font-size:0px;height:0px;overflow:hidden;} 
    24. #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;} 
    25. .hidden{display:none;} 
    26. .move{cursor:move;} 
    27. --> 
    28. </style> 
    29. </head> 
    30. <body> 
    31. <div id="main"> 
    32.   <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/> 
    33.   <div id="result"> 
    34.   <div class="tit bgc_eee"> 
    35.    <h2>您已选择的城市汇总</h2> 
    36.   </div>  
    37.   <div class="cont" id="makeSureItem"> 
    38.   </div> 
    39.   </div> 
    40. </div> 
    41.   
    42. <div id="bg"> 
    43. </div> 
    44. <div id="selectItem" class="hidden"> 
    45.   <div class="tit bgc_ccc move" onmousedown="drag(event,this)"> 
    46.    <h2 class="left">请选择城市</h2> 
    47.    <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span> 
    48.    <span class="pointer right" onclick="makeSure();">[确定]</span>    
    49.   </div> 
    50.   <div class="cls"></div> 
    51.   <div class="cont"> 
    52.    <div id="selectSub"> 
    53.      <div id="c00"> 
    54.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京 
    55.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建 
    56.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川  
    57.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏 
    58.     </div> 
    59.     <div id="c01"> 
    60.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海 
    61.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南 
    62.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州 
    63.     </div> 
    64.     <div id="c02"> 
    65.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江 
    66.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林 
    67.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁 
    68.     </div> 
    69.     <div id="c03"> 
    70.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国 
    71.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗 
    72.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本 
    73.     </div> 
    74.    </div> 
    75.   </div> 
    76.   <div id="preview"> 
    77.    <div class="tit bgc_eee c_999"> 
    78.     <h2>您已选择的城市</h2> 
    79.    </div>  
    80.    <div class="cont" id="previewItem"> 
    81.    </div> 
    82.   </div> 
    83. </div> 
    84.   
    85. <script type="text/javascript"> 
    86. /* ------使用说明----- */ 
    87. /* 
    88.  添加城市方法： 
    89.      添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增 
    90.  添加二级傅选矿选项 
    91.   复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。 
    92. */ 
    93. var grow = $("selectSub").getElementsByTagName("option").length; //组数 
    94. var showGrow = 0;//已打开组 
    95. var selectCount = 0; //已选数量  
    96. showSelect(showGrow); 
    97. var items = $("selectSub").getElementsByTagName("input"); 
    98. //alert(maxItem); 
    99. //var lenMax = 2;  
    100. //alert(1); 
    101. function $(o){ //获取对象 
    102.  if(typeof(o) == "string") 
    103.  return document.getElementById(o); 
    104.  return o; 
    105. } 
    106. function openBg(state){ //遮照打开关闭控制 
    107.  if(state == 1) 
    108.  { 
    109.   $("bg").style.display = "block"; 
    110.   var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight; 
    111.  //alert(document.body.offsetHeight); 
    112.  //alert(document.documentElement.offsetHeight); 
    113.   $("bg").style.height = h + "px"; 
    114.  } 
    115.  else 
    116.  { 
    117.   $("bg").style.display = "none"; 
    118.  }  
    119. } 
    120. function openSelect(state){ //选择城市层关闭打开控制 
    121.  if(state == 1)  
    122.  { 
    123.   $("selectItem").style.display = "block"; 
    124.   $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px"; 
    125.   $("selectItem").style.top = document.body.scrollTop + 100 + "px";   
    126.  } 
    127.  else 
    128.  { 
    129.   $("selectItem").style.display = "none"; 
    130.  } 
    131. } 
    132. function showSelect(id){ 
    133.  for(var i = 0 ; i < grow ;i++) 
    134.  { 
    135.   $("c0" + i).style.display = "none"; 
    136.  } 
    137.  $("c0" + id).style.display = "block"; 
    138.  showGrow = id; 
    139. } 
    140. function open(id,state){ //显示隐藏控制 
    141.  if(state == 1) 
    142.  $(id).style.display = "block"; 
    143.  $(id).style.diaplay = "none"; 
    144. } 
    145. function addPreItem(){  
    146.  $("previewItem").innerHTML = ""; 
    147.  var len　= 0 ; 
    148.  for(var i = 0 ; i < items.length ; i++) 
    149.  { 
    150.   if(items[i].checked == true) 
    151.   { 
    152.    //len++; 
    153.    //if(len > lenMax) 
    154.    //{ 
    155.    // alert("不能超过" + lenMax +"个选项！") 
    156.    // return false; 
    157.    //} 
    158.    var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem("previewItem","previewItem");same(this);'>" + items[i].value; 
    159.    $("previewItem").innerHTML += mes; 
    160.    //alert(items[i].value); 
    161.   } 
    162.  } 
    163. } 
    164. function makeSure(){ 
    165.  //alert(1); 
    166.  //$("makeSureItem").innerHTML = $("previewItem").innerHTML; 
    167.  openBg(0); 
    168.  openSelect(0); 
    169.  copyItem("previewItem","makeSureItem")  
    170. } 
    171. function copyHTML(id1,id2){ 
    172.  $(id2).innerHTML = $("id1").innerHTML; 
    173. } 
    174. function copyItem(id1,id2){ 
    175.   
    176.  var mes = ""; 
    177.  var items2 = $(id1).getElementsByTagName("input"); 
    178.  for(var i = 0 ; i < items2.length ; i++) 
    179.  { 
    180.   if(items2[i].checked == true) 
    181.   { 
    182.    mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem("" + id2+ "",""+ id1 +"");same(this);'>" + items2[i].value;    
    183.   } 
    184.  } 
    185.  $(id2).innerHTML = ""; 
    186.  $(id2).innerHTML += mes; 
    187.  //alert($(id2).innerHTML); 
    188. } 
    189. function same(ck){ 
    190.  for(var i = 0 ; i < items.length ; i++) 
    191.  { 
    192.   if(ck.value == items[i].value) 
    193.   { 
    194.    items[i].checked = ck.checked; 
    195.   } 
    196.  } 
    197. }  
    198. /* 鼠标拖动 */ 
    199. var oDrag = ""; 
    200. var ox,oy,nx,ny,dy,dx; 
    201. function drag(e,o){ 
    202.  var ee = e ? e : event; 
    203.  var mouseD = document.all ? 1 : 0; 
    204.  if(e.button == mouseD) 
    205.  { 
    206.   ooDrag = o.parentNode; 
    207.   //alert(oDrag.id); 
    208.   ox = e.clientX; 
    209.   oy = e.clientY;   
    210.  } 
    211. } 
    212. function dragPro(e){ 
    213.  if(oDrag != "") 
    214.  {  
    215.   var ee = e ? e : event; 
    216.   //$(oDrag).style.left = $(oDrag).offsetLeft + "px"; 
    217.   //$(oDrag).style.top = $(oDrag).offsetTop + "px"; 
    218.   dx = parseInt($(oDrag).style.left); 
    219.   dy = parseInt($(oDrag).style.top); 
    220.   //dx = $(oDrag).offsetLeft; 
    221.   //dy = $(oDrag).offsetTop; 
    222.   nx = e.clientX; 
    223.   ny = e.clientY; 
    224.   $(oDrag).style.left = (dx + ( nx - ox )) + "px"; 
    225.   $(oDrag).style.top = (dy + ( ny - oy )) + "px"; 
    226.   ox = nx; 
    227.   oy = ny; 
    228.  } 
    229. } 
    230. document.onmouseup = function(){oDrag = "";} 
    231. document.onmousemove = function(event){dragPro(event);} 
    232. </script> 
    233. </body> 
    234. </html> 
  • 相关阅读:
    JS设计模式的坑
    nth-child()和nth-of-type()的区别，以及如何在nth中添加变量和表达式
    for循环中，使用闭包和不使用闭包的区别以及原因
    JS闭包的基础知识，闭包的本质，闭包的作用，闭包的间谍属性和闭包的遗憾
    前端和后端数据交互的基本知识和常见方式
    dedecms手机PC同步更新插件的bug修复和前后端调试的经验
    065 女神颜值打分系统
    029 令牌桶算法限流
    04-01 集成学习基础
    028 【博弈论】关于三姬分金(五海盗分赃)的博弈论问题分析
  • 原文地址：https://www.cnblogs.com/umgsai/p/3908165.html
Copyright © 2011-2022 走看看