打印

51job效果

thirdteendevil [楼主]

十三妖
高级会员

帖子: 252
体力: 602
威望: 2
当前: 北京西城区
离线: 3 天

专长 前端制作,JS

1^# 大中小发表于 2008-5-12 16:57

<!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>

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

[ 本帖最后由 thirdteendevil 于 2008-5-12 16:59 编辑 ]

qq:309322941-十三妖

TOP

zxjxl918

新手上路

帖子: 5
体力: 11
威望: 0
离线: 1 天

发短消息

2^# 大中小发表于 2008-5-12 17:02

好东西

TOP

moca

初级会员

帖子: 53
体力: 73
威望: 0
离线: 4 天

发短消息

3^# 大中小发表于 2008-5-12 17:48

这个比较实用,呵呵,顶下

TOP

beginzy

中级会员

帖子: 164
体力: 332
威望: 0
当前: 北京海淀区
离线: 13 天

4^# 大中小发表于 2008-5-12 17:57

我收下了,向你学习哦.
有时间看看我新做的那个换图的吧,指教一下,应该就在第一页里呢

TOP

tangl198710

啸天皇帝
高级会员

帖子: 419
体力: 925
威望: 0
当前: 四川成都
离线: 4 天

发短消息

专长 PHP,MySQL,MSSQL

5^# 大中小发表于 2008-5-12 18:21

我想知道。为什么网易博客里面的那个音乐管理里面

新建专集为什么可以锁定整个页面。

TOP

CB

新手上路

帖子: 12
体力: 25
威望: 0
当前: 江苏无锡

发短消息

6^# 大中小发表于 2008-5-12 18:36

正在找这个多谢楼主。
顺便问下楼主，51JOB里面选择地区的省市联动也是用类似的方法做的，能做一个放出来吗？

我是菜鸟，好菜的鸟！！！！

TOP

lovelylife

中级会员

帖子: 101
体力: 217
威望: 0
当前: 上海浦东
离线: 4 天

7^# 大中小发表于 2008-5-12 19:44

这个用户界面友好，应该学习学习

收下了

=============================================
http://onlyaa.com [javascript经典专区]

TOP

aieii

新手上路

帖子: 1
体力: 7
威望: 0
当前: 广东深圳
离线: 43 天

发短消息

8^# 大中小发表于 2008-5-12 20:06

不错不错!支持下

TOP

kl19872

花会开
中级会员

帖子: 147
体力: 301
威望: 0
当前: 山东荷泽

发短消息

9^# 大中小发表于 2008-5-12 21:19

用的上
标记

TOP

ljlyy

中级会员

帖子: 98
体力: 227
威望: 1
当前: 广东广州
离线: 1 天

发短消息

10^# 大中小发表于 2008-5-12 22:14

引用:

原帖由 CB 于 2008-5-12 18:36 发表
正在找这个多谢楼主。
顺便问下楼主，51JOB里面选择地区的省市联动也是用类似的方法做的，能做一个放出来吗？

是不是这个呀？？？
http://www.94this.com.cn/article.asp?id=24

博客

TOP

zonegocn

新手上路

帖子: 11
体力: 31
威望: 0
当前: 湖南湘潭
离线: 45 天

11^# 大中小发表于 2008-5-12 22:20

在FF里有点问题吧.

TOP

tianyazjq110

中级会员

帖子: 137
体力: 292
威望: 1
离线: 5 天

发短消息

12^# 大中小发表于 2008-5-12 22:27

妖哥出手..必是精品啊~~向妖哥学习

革命尚未成功

TOP

CB

新手上路

帖子: 12
体力: 25
威望: 0
当前: 江苏无锡

发短消息

13^# 大中小发表于 2008-5-12 22:49

引用:

原帖由 ljlyy 于 2008-5-12 22:14 发表

是不是这个呀？？？
http://www.94this.com.cn/article.asp?id=24

恩，就是这个，多谢，多谢

我是菜鸟，好菜的鸟！！！！

TOP

canstar

新手上路

帖子: 11
体力: 28
威望: 0
当前: 湖南长沙
离线: 22 天

发短消息

14^# 大中小发表于 2008-5-12 22:54

收下，学习。

TOP

hanfeng527

高级会员

帖子: 226
体力: 509
威望: 0
离线: 2 天

15^# 大中小发表于 2008-5-13 08:17

效果太帅了，支持

风云

TOP

livecoffee

初级会员

帖子: 52
体力: 112
威望: 0
当前: 湖北武汉
离线: 9 天

发短消息

专长 网页设计,PHP,ASP

16^# 大中小发表于 2008-5-13 08:19

顶LZ 谢谢分享

TOP

gongzhw

淘折网
中级会员

帖子: 270
体力: 414
威望: 0
离线: 14 天

17^# 大中小发表于 2008-5-13 10:38

顶LZ 谢谢分享顶LZ 谢谢分享顶LZ 谢谢分享顶LZ 谢谢分享

http://www.allss.com.cn

TOP

kanghuanan

初级会员

帖子: 66
体力: 62
威望: 0
当前: 北京东城区
离线: 5 天

发短消息

18^# 大中小发表于 2008-5-13 10:58

比较棒..收藏了...在FF是BG有问题...背景的高度不是!100%,

TOP

asgardmoon

笑笑十年
高级会员

帖子: 643
体力: 925
威望: 1

发短消息

19^# 大中小发表于 2008-5-13 11:00

这个遮罩的计算有漏洞，没计算滚动条。

TOP

xfcmamb

初级会员

帖子: 37
体力: 81
威望: 0
当前: 江西赣州
离线: 13 天

发短消息

20^# 大中小发表于 2008-5-13 12:00

不错。但跟51job不是一模一样。。。

TOP

sxling111

中级会员

帖子: 96
体力: 202
威望: 0
当前: 北京海淀区
离线: 17 天

发短消息

21^# 大中小发表于 2008-5-13 12:20

支持！

美丽心灵

TOP

麦琪

新手上路

帖子: 32
体力: 43
威望: 0

发短消息

22^# 大中小发表于 2008-5-13 15:39

很好，正需要这个效果，感谢分享。

TOP

jackalchan

新手上路

帖子: 5
体力: 15
威望: 0
当前: 新疆乌鲁木齐
离线: 1 天

发短消息

23^# 大中小发表于 2008-5-13 16:47

不错的效果哈！

TOP

jimstory

中级会员

帖子: 108
体力: 229
威望: 0
当前: 上海徐汇

发短消息

24^# 大中小发表于 2008-5-14 16:50

不错不错,收藏之.呵
谢谢了.

TOP

carlos110

新手上路

帖子: 2
体力: 9
威望: 0
离线: 4 天

发短消息

25^# 大中小发表于 2008-5-14 22:46

收藏了感谢楼主

TOP

sidney130187

新手上路

帖子: 16
体力: 32
威望: 0
离线: 3 天

发短消息

26^# 大中小发表于 2008-5-21 10:00

这个比较实用,收下学习

TOP

personlang

新手上路

帖子: 38
体力: 48
威望: 0
当前: 上海浦东
离线: 1 天

27^# 大中小发表于 2008-6-5 19:36

很实用很友好，收下了！

TOP

ASP0000

中级会员

帖子: 130
体力: 297
威望: 0
离线: 17 天

发短消息

28^# 大中小发表于 2008-6-6 17:39

这个效果好。

TOP

junisvip

新手上路

帖子: 8
体力: 13
威望: 0
当前: 广东广州
离线: 17 天

29^# 大中小发表于 2008-6-19 14:07

非常不错的效果，收藏了

TOP