教程集 > 脚本编程 > javascript > 正文 51job效果

51job效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供51job效果等资源，欢迎您收藏本站，我们将为您提供最新的51job效果资源

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>无标题文档</title>  <style type="text/css">    </style>  </head>  <body>  <div id="main">    <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>    <div id="result">  		<div class="tit bgc_eee">  			<h2>您已选择的城市汇总</h2>  		</div>	  		<div class="cont" id="makeSureItem">  		</div>    </div>  </div>  	  <div id="bg">  </div>  <div id="selectItem" class="hidden">  		<div class="tit bgc_ccc move" onmousedown="drag(event,this)">  			<h2 class="left">请选择城市</h2>  			<span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>  			<span class="pointer right" onclick="makeSure();">[确定]</span>			  		</div>  		<div class="cls"></div>  		<div class="cont">  			<div id="selectSub">  				<select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">  					<option value="0">第0层</option>  					<option value="1">第1层</option>  					<option value="2">第2层</option>  					<option value="3">第3层</option>  				</select>  				<div id="c00">  					<input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京  					<input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建  					<input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川	  					<input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏  				</div>  				<div id="c01">  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州  				</div>  				<div id="c02">  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁  				</div>  				<div id="c03">  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗  					<input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本  				</div>  			</div>  		</div>  		<div id="preview">  			<div class="tit bgc_eee c_999">  				<h2>您已选择的城市</h2>  			</div>	  			<div class="cont" id="previewItem">  			</div>  		</div>  </div>  	  <script type="text/javascript">  /* ------使用说明----- */  /*  	添加城市方法：  	    添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增  	添加二级傅选矿选项  		复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。  */  var grow = $("selectSub").getElementsByTagName("option").length; //组数  var showGrow = 0;//已打开组  var selectCount = 0; //已选数量   showSelect(showGrow);  var items = $("selectSub").getElementsByTagName("input");  //alert(maxItem);  //var lenMax = 2;   //alert(1);  function $(o){ //获取对象  	if(typeof(o) == "string")  	return document.getElementById(o);  	return o;  }  function openBg(state){ //遮照打开关闭控制  	if(state == 1)  	{  		$("bg").style.display = "block";  		var h = 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";  	}	  }  function openSelect(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";  	}  }  function showSelect(id){  	for(var i = 0 ; i < grow ;i  )  	{  		$("c0"   i).style.display = "none";  	}  	$("c0"   id).style.display = "block";  	showGrow = id;  }  function open(id,state){ //显示隐藏控制  	if(state == 1)  	$(id).style.display = "block";  	$(id).style.diaplay = "none";  }  function addPreItem(){	  	$("previewItem").innerHTML = "";  	var len　= 0 ;  	for(var i = 0 ; i < items.length ; i  )  	{  		if(items[i].checked == true)  		{  			//len  ;  			//if(len > lenMax)  			//{  			//	alert("不能超过"   lenMax  "个选项！")  			//	return false;  			//}  			var mes = "<input type='checkbox' checked='true' value='"  items[i].value  "' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>"   items[i].value;  			$("previewItem").innerHTML  = mes;  			//alert(items[i].value);  		}  	}  }  function makeSure(){  	//alert(1);  	//$("makeSureItem").innerHTML = $("previewItem").innerHTML;  	openBg(0);  	openSelect(0);  	copyItem("previewItem","makeSureItem")	  }  function copyHTML(id1,id2){  	$(id2).innerHTML = $("id1").innerHTML;  }  function copyItem(id1,id2){  	  	var mes = "";  	var items2 = $(id1).getElementsByTagName("input");  	for(var i = 0 ; i < items2.length ; i  )  	{  		if(items2[i].checked == true)  		{  			mes  = "<input type='checkbox' checked='true' value='"  items2[i].value  "' onclick='copyItem(\""   id2  "\",\""  id1  "\");same(this);'>"   items2[i].value;			  		}  	}  	$(id2).innerHTML = "";  	$(id2).innerHTML  = mes;  	//alert($(id2).innerHTML);  }  function same(ck){  	for(var i = 0 ; i < items.length ; i  )  	{  		if(ck.value == items[i].value)  		{  			items[i].checked = ck.checked;  		}  	}  }	  /* 鼠标拖动 */  var oDrag = "";  var ox,oy,nx,ny,dy,dx;  function drag(e,o){  	var e = e ? e : event;  	var mouseD = document.all ? 1 : 0;  	if(e.button == mouseD)  	{  		oDrag = o.parentNode;  		//alert(oDrag.id);  		ox = e.clientX;  		oy = e.clientY;		  	}  }  function dragPro(e){  	if(oDrag != "")  	{	  		var e = 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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
半透明效果 blur.js
jQuery幻灯片插件 SlidesJS
jQuery的效果集工具包 Glimmer
15个jQuery和CSS3页面切换动画效果
 jquery (show,fadeOut,Animate)简单效果
 photoshop把图片转为模仿建筑景观蓝图效果教程
 jQuery特效字体插件 Font effect
photoshop利用分层云彩快速制作闪电效果教程
 photoshop制作冲光视觉效果教程
 Illustrator打造曲线效果的字体效果绘制教程

上一篇：视觉享受的鼠标圈选效果下一篇：点击连接,表格换色

[关闭]

51job效果

最近更新

浏览排行