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

最新推荐文章于 2025-09-07 12:15:11 发布

商商-77

最新推荐文章于 2025-09-07 12:15:11 发布

阅读量127

点赞数

文章标签： xhtml javascript ViewUI

本文介绍了一个模仿51job网站的城市选择框特效实现案例。通过HTML、CSS及JavaScript实现了可拖动的选择框，支持多选并展示已选城市。文章详细展示了特效的前端代码实现。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>仿51job.com城市选择框特效</title>
<styletype="text/css">
<!--
body{padding-top:50px;font-size:12px;}
h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}
.bton{border:1pxsolid#CCC;background:#DDD;}
.cont{padding:10px;}
#main{width:400px;margin:0pxauto;}
#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1pxsolid#000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}
#preview{margin:1px;border:1pxsolid#CCC;}
#result{border:1pxsolid#CCC;margin-top:10px;}
.tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}
.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;height:0px;overflow:hidden;}
#bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}
.hidden{display:none;}
.move{cursor:move;}
-->
</style>
</head>
<body>
<divid="main">
<inputname="button"type="button"class="btonpointer"value="请选择"onclick="openBg(1);openSelect(1)"/>
<divid="result">
<divclass="titbgc_eee">
<h2>您已选择的城市汇总</h2>
</div>
<divclass="cont"id="makeSureItem">
</div>
</div>
</div>
<divid="bg">
</div>
<divid="selectItem"class="hidden">
<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">
<divid="c00">
<inputtype="checkbox"name="ck00"onclick="addPreItem()"value="北京"/>北京
<inputtype="checkbox"name="ck00"onclick="addPreItem()"value="福建"/>福建
<inputtype="checkbox"name="ck00"onclick="addPreItem()"value="四川"/>四川
<inputtype="checkbox"name="ck00"onclick="addPreItem()"value="江苏"/>江苏
</div>
<divid="c01">
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="上海"/>上海
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="云南"/>云南
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="贵州"/>贵州
</div>
<divid="c02">
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="黑龙江"/>黑龙江
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="吉林"/>吉林
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="辽宁"/>辽宁
</div>
<divid="c03">
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="美国"/>美国
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="阿富汗"/>阿富汗
<inputtype="checkbox"name="ck01"onclick="addPreItem()"value="日本"/>日本
</div>
</div>
</div>
<divid="preview">
<divclass="titbgc_eeec_999">
<h2>您已选择的城市</h2>
</div>
<divclass="cont"id="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[i].checked==true)
{
//len++;
//if(len>lenMax)
//{
//alert("不能超过"+lenMax+"个选项！")
//returnfalse;
//}
varmes="<inputtype='checkbox'checked='true'value='"+items[i].value+"'onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>"+items[i].value;
$("previewItem").innerHTML+=mes;
//alert(items[i].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[i].checked==true)
{
mes+="<inputtype='checkbox'checked='true'value='"+items2[i].value+"'onclick='copyItem(\""+id2+"\",\""+id1+"\");same(this);'>"+items2[i].value;
}
}
$(id2).innerHTML="";
$(id2).innerHTML+=mes;
//alert($(id2).innerHTML);
}
functionsame(ck){
for(vari=0;i<items.length;i++)
{
if(ck.value==items[i].value)
{
items[i].checked=ck.checked;
}
}
}
/*鼠标拖动*/
varoDrag="";
varox,oy,nx,ny,dy,dx;
functiondrag(e,o){
varee=e?e:event;
varmouseD=document.all?1:0;
if(e.button==mouseD)
{
ooDrag=o.parentNode;
//alert(oDrag.id);
ox=e.clientX;
oy=e.clientY;
}
}
functiondragPro(e){
if(oDrag!="")
{
varee=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>