|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
大大增加协同工作的难度，很多没学过div的程序员对于美工出的div页面束手无措，稍微改错了，可能整个站点就惨不忍睹了。当然，如果你是一个全才，可以搞定一切，也可能不会。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTMLxmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>相似中华英才网，51job的区域选择效果</TITLE><METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8"><STYLEtype=text/CSS>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:#ccc1pxsolid;BORDER-TOP:#ccc1pxsolid;BACKGROUND:#ddd;BORDER-LEFT:#ccc1pxsolid;BORDER-BOTTOM:#ccc1pxsolid}.cont{PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;PADDING-TOP:10px}#main{MARGIN:0pxauto;WIDTH:400px}#selectItem{BORDER-RIGHT:#0001pxsolid;BORDER-TOP:#0001pxsolid;MARGIN-TOP:10px;Z-INDEX:2;BACKGROUND:#fff;OVERFLOW:hidden;BORDER-LEFT:#0001pxsolid;WIDTH:400px;BORDER-BOTTOM:#0001pxsolid;POSITION:absolute;TOP:0px}#preview{BORDER-RIGHT:#ccc1pxsolid;BORDER-TOP:#ccc1pxsolid;MARGIN:1px;BORDER-LEFT:#ccc1pxsolid;BORDER-BOTTOM:#ccc1pxsolid}#result{BORDER-RIGHT:#ccc1pxsolid;BORDER-TOP:#ccc1pxsolid;MARGIN-TOP:10px;BORDER-LEFT:#ccc1pxsolid;BORDER-BOTTOM:#ccc1pxsolid}.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}</STYLE><METAcontent="MSHTML6.00.2900.3314"name=GENERATOR></HEAD><BODY><DIVid=main><INPUTclass="btonpointer"onclick=openBg(1);openSelect(1)type=buttonvalue=请选择name=button><DIVid=result><DIVclass="titbgc_eee"><H2>您已选择的乡村汇总</H2></DIV><DIVclass=contid=makeSureItem></DIV></DIV></DIV><DIVid=bg></DIV><DIVclass=hiddenid=selectItem><DIVclass="titbgc_cccmove"onmousedown=drag(event,this)><H2class=left>请选择乡村</H2><SPANclass="pointerright"onclick=openBg(0);openSelect(0);>[作废]</SPAN><SPANclass="pointerright"onclick=makeSure();>[断定]</SPAN></DIV><DIVclass=cls></DIV><DIVclass=cont><DIVid=selectSub><SELECTstyle="MARGIN-BOTTOM:10px"onchange=showSelect(this.value)name=""><OPTIONvalue=0selected>第0层</OPTION><OPTIONvalue=1>第1层</OPTION><OPTIONvalue=2>第2层</OPTION><OPTIONvalue=3>第3层</OPTION></SELECT><DIVid=c00><INPUTonclick=addPreItem()type=checkboxvalue=北京name=ck00>北京<INPUTonclick=addPreItem()type=checkboxvalue=福建name=ck00>福建<INPUTonclick=addPreItem()type=checkboxvalue=四川name=ck00>四川<INPUTonclick=addPreItem()type=checkboxvalue=江苏name=ck00>江苏</DIV><DIVid=c01><INPUTonclick=addPreItem()type=checkboxvalue=上海name=ck01>上海<INPUTonclick=addPreItem()type=checkboxvalue=云南name=ck01>云南<INPUTonclick=addPreItem()type=checkboxvalue=贵州name=ck01>贵州</DIV><DIVid=c02><INPUTonclick=addPreItem()type=checkboxvalue=黑龙江name=ck01>黑龙江<INPUTonclick=addPreItem()type=checkboxvalue=吉林name=ck01>吉林<INPUTonclick=addPreItem()type=checkboxvalue=辽宁name=ck01>辽宁</DIV><DIVid=c03><INPUTonclick=addPreItem()type=checkboxvalue=美国name=ck01>美国<INPUTonclick=addPreItem()type=checkboxvalue=阿富汗name=ck01>阿富汗<INPUTonclick=addPreItem()type=checkboxvalue=日本name=ck01>日本</DIV></DIV></DIV><DIVid=preview><DIVclass="titbgc_eeec_999"><H2>您已选择的乡村</H2></DIV><DIVclass=contid=previewItem></DIV></DIV></DIV><SCRIPTtype=text/javascript>/*------利用申明-----*//*增加乡村办法：增加组：找到id是"selectSub"中select标签下，增加option标签value属性递增，找到id是"selectSub",依照原有格局增加div,其id属性递增增加二级傅选矿选项复制id是"selectSub"下恣意input标签，粘贴在必要增加的地位。*/vargrow=$("selectSub").getElementsByTagName("option").length;//组数varshowGrow=0;//已翻开组varselectCount=0;//已选数目showSelect(showGrow);varitems=$("selectSub").getElementsByTagName("input");//alert(maxItem);//varlenMax=2;//alert(1);function$(o){//猎取工具if(typeof(o)=="string")returndocument.getElementById(o);returno;}functionopenBg(state){//遮照翻开封闭把持if(state==1){$("bg").style.display="block";varh=document.body.offsetHeight>document.documentElement.offsetHeight?document.body.offsetHeight:document.documentElement.offsetHeight;//alert(document.body.offsetHeight);//alert(document.documentElement.offsetHeight);$("bg").style.height=h+"px";}else{$("bg").style.display="none";}}functionopenSelect(state){//选择乡村层封闭翻开把持if(state==1){$("selectItem").style.display="block";$("selectItem").style.left=($("bg").offsetWidth-$("selectItem").offsetWidth)/2+"px";$("selectItem").style.top=document.body.scrollTop+100+"px";}else{$("selectItem").style.display="none";}}functionshowSelect(id){for(vari=0;i<grow;i++){$("c0"+i).style.display="none";}$("c0"+id).style.display="block";showGrow=id;}functionopen(id,state){//显现埋没把持if(state==1)$(id).style.display="block";$(id).style.diaplay="none";}functionaddPreItem(){$("previewItem").innerHTML="";varlen =0;for(vari=0;i<items.length;i++){if(items.checked==true){//len++;//if(len>lenMax)//{//alert("不克不及凌驾"+lenMax+"个选项！")//returnfalse;//}varmes="<inputtype=checkboxchecked=truevalue="+items.value+">"+items.value;$("previewItem").innerHTML+=mes;//alert(items.value);}}}functionmakeSure(){//alert(1);//$("makeSureItem").innerHTML=$("previewItem").innerHTML;openBg(0);openSelect(0);copyItem("previewItem","makeSureItem")}functioncopyHTML(id1,id2){$(id2).innerHTML=$("id1").innerHTML;}functioncopyItem(id1,id2){varmes="";varitems2=$(id1).getElementsByTagName("input");for(vari=0;i<items2.length;i++){if(items2.checked==true){mes+="<inputtype=checkboxchecked=truevalue="+items2.value+">"+items2.value;}}$(id2).innerHTML="";$(id2).innerHTML+=mes;//alert($(id2).innerHTML);}functionsame(ck){for(vari=0;i<items.length;i++){if(ck.value==items.value){items.checked=ck.checked;}}}/*鼠标拖动*/varoDrag="";varox,oy,nx,ny,dy,dx;functiondrag(e,o){vare=e?e:event;varmouseD=document.all?1:0;if(e.button==mouseD){oDrag=o.parentNode;//alert(oDrag.id);ox=e.clientX;oy=e.clientY;}}functiondragPro(e){if(oDrag!=""){vare=e?e:event;//$(oDrag).style.left=$(oDrag).offsetLeft+"px";//$(oDrag).style.top=$(oDrag).offsetTop+"px";dx=parseInt($(oDrag).style.left);dy=parseInt($(oDrag).style.top);//dx=$(oDrag).offsetLeft;//dy=$(oDrag).offsetTop;nx=e.clientX;ny=e.clientY;$(oDrag).style.left=(dx+(nx-ox))+"px";$(oDrag).style.top=(dy+(ny-oy))+"px";ox=nx;oy=ny;}}document.onmouseup=function(){oDrag="";}document.onmousemove=function(event){dragPro(event);}</SCRIPT></BODY></HTML>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:37:03
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主