打印

动画效果打开层关闭层

本主题由 System 于 2008-4-22 05:00 解除限时高亮

thirdteendevil [楼主]

十三妖

高级会员

帖子: 267
体力: 643
威望: 2
当前: 北京西城区
离线: 7 天

专长 前端制作,JS

1^# 大中小发表于 2008-4-7 14:12

<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
	<a href="#" class="od" onclick = "show('fd');return false;">
		[打开层]
	</a>
	<a href="#" class="od" onclick = "closeed('fd');return false;">
		[关闭层]
	</a>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>	
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

mckinley

嗒嗒

中级会员

帖子: 195
体力: 340
威望: 0
当前: 浙江杭州
离线: 16 天

2^# 大中小发表于 2008-4-7 14:14

很好！很强大！收藏了！多谢lz!

达达的Blog http://www.asflex.cn

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

gyct

初级会员

帖子: 69
体力: 135
威望: 0
离线: 3 天

3^# 大中小发表于 2008-4-7 18:59

效果不错！还没见过类似的。呵呵

TOP

掌握加薪筹码 IT薪资宝典给您答案！

dlhk1989

初级会员

帖子: 75
体力: 139
威望: 0
当前: 辽宁大连
离线: 58 天

4^# 大中小发表于 2008-4-8 00:00

此帖做个记号。。HOHO

TS

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

yahioom

初级会员

帖子: 23
体力: 53
威望: 0
离线: 148 天

5^# 大中小发表于 2008-4-8 09:24

好像真的不错，有没有什么运用的样本看看？谢谢

TOP

iid0019

汤海龙

高级会员

帖子: 862
体力: 808
威望: 0
当前: 广东珠海

专长 ASP

6^# 大中小发表于 2008-4-8 09:30

不錯，支持我要用的所有瀏覽器

空白中......

TOP

ddl0762

初级会员

帖子: 83
体力: 182
威望: 0
当前: 广东河源
离线: 11 天

专长 网页设计,UI,平面

7^# 大中小发表于 2008-4-8 10:36

不错! 就是实用性不大!

TOP

xilao

初级会员

帖子: 26
体力: 53
威望: 0
离线: 11 天

8^# 大中小发表于 2008-4-8 10:38

这个功能很好，支持一把

TOP

92css

初级会员

帖子: 58
体力: 68
威望: 0
离线: 6 天

专长 市场,推广,媒介

9^# 大中小发表于 2008-4-8 12:00

能不能请楼主修改一下,把打开层和关闭层做到一个按钮上,打开后显示关闭按钮,关闭后显示打开按钮

我不会做,谢谢!

TOP

feast1000

新手上路

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

10^# 大中小发表于 2008-4-8 13:32

楼上的跟我想的一样

简单最美

TOP

joymv

貌似没几年青春

中级会员

帖子: 295
体力: 471
威望: 0
当前: 江西南昌
离线: 1 天

专长 网页设计,PHP

11^# 大中小发表于 2008-4-8 14:05

要是能在打开的层上,设一个关闭键就更好.

iT堂

TOP

92css

初级会员

帖子: 58
体力: 68
威望: 0
离线: 6 天

专长 市场,推广,媒介

12^# 大中小发表于 2008-4-8 14:37

引用:

原帖由 joymv 于 2008-4-8 14:05 发表
要是能在打开的层上,设一个关闭键就更好.

这个好像不难

<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
	<a href="#" class="od" onclick = "show('fd');return false;">
		[打开层]
	</a>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层<a href="#" class="od" onclick = "closeed('fd');return false;">关闭层</a></div>
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

[ 本帖最后由 92css 于 2008-4-8 14:39 编辑 ]

TOP

92css

初级会员

帖子: 58
体力: 68
威望: 0
离线: 6 天

专长 市场,推广,媒介

13^# 大中小发表于 2008-4-8 16:38

顶下,9楼谁能实现一下

TOP

Manb

初级会员

帖子: 68
体力: 115
威望: 0
当前: 广东深圳
离线: 188 天

14^# 大中小发表于 2008-4-8 16:45

LZ厉害啊！那效果非常不错哦！收下先！谢谢

TOP

linshushi

月伤

银牌会员

帖子: 975
体力: 2217
威望: 69
当前: 北京通州区
离线: 1 天

专长 JS,WAP ,.NET

15^# 大中小发表于 2008-4-8 17:07

效果挺Cool的，代码方面应该还可以精简一下

我的Blog

TOP

thirdteendevil [楼主]

十三妖

高级会员

帖子: 267
体力: 643
威望: 2
当前: 北京西城区
离线: 7 天

专长 前端制作,JS

16^# 大中小发表于 2008-4-8 17:46

<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
.hidden{display:none;}
</style>
</head>
<body>
<div id="bodyL">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	
	<input type="button" value="打开" id="a" onclick="document.getElementById('b').style.display = 'block';this.style.display = 'none';show('fd');"/>
	<input type="button" value="关闭" id="b" class="hidden" onclick="document.getElementById('a').style.display = 'block';this.style.display = 'none';closeed('fd');"/>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

是这个意思么？

TOP

caiying2007

版主

帖子: 2744
体力: 5244
威望: 10

17^# 大中小发表于 2008-4-8 18:25

小改

<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
.hidden{display:none;}
</style>
</head>
<body>
<div id="bodyL">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	
	<input type="button" value="打开" id="sw_bt" onclick="sw(this,'fd');"/>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>
</div>
	
<script type="text/javascript">
function sw(o,id){
	if (o.value=="打开"){
		o.value="关闭";
		show(id)
	}
	else{
		o.value="打开"
		closeed(id)
	}
}
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

TOP

dsqwei1

Andy88

高级会员

帖子: 1824
体力: 950
威望: 0
当前: 北京朝阳区

专长 JS,AS

18^# 大中小发表于 2008-4-9 11:36

留记号,收了

大浪淘沙.

TOP

yizhe

新手上路

帖子: 4
体力: 8
威望: 0
当前: 北京东城区
离线: 3 天

19^# 大中小发表于 2008-4-9 12:06

顶一下,收藏了...支持哪个浏览器啊

16ue.cn

TOP

openwings

飞翔天际

中级会员

帖子: 145
体力: 305
威望: 0
当前: 内蒙呼和浩特
离线: 3 天

专长 网页设计,前端制作

20^# 大中小发表于 2008-4-9 12:31

楼住是否可以看下kankan.xunlei.com
里面的效果?
虽然他不支持FF

点击左侧的分类,之后背景半透明黑..左侧分类链接还是高亮..

求教,不胜感激.

TOP

fonqing

一路蹒跚

银牌会员

帖子: 1561
体力: 2689
威望: 3
当前: 山东潍坊

专长 JS,PHP,MySQL

21^# 大中小发表于 2008-4-9 16:19

opera 9.5 不能拖动

shetuan.cn(社团)

TOP

92css

初级会员

帖子: 58
体力: 68
威望: 0
离线: 6 天

专长 市场,推广,媒介

22^# 大中小发表于 2008-4-9 16:27

谢了

<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
.hidden{display:none;}
</style>
</head>
<body>
<div id="bodyL">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<a href="#" class="od" id="a" onclick="document.getElementById('b').style.display = 'block';this.style.display = 'none';show('fd');"/>[打开层]</a>
	<a href="#" class="od" style="display:none;}" id="b" onclick="document.getElementById('a').style.display = 'block';this.style.display = 'none';closeed('fd');"/>[关闭层]</a>
	</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

[ 本帖最后由 92css 于 2008-4-9 16:35 编辑 ]

TOP

qqhunter

新手上路

帖子: 18
体力: 27
威望: 0
离线: 9 天

23^# 大中小发表于 2008-4-9 16:35

opera 9.50不能拖动

TOP

thirdteendevil [楼主]

十三妖

高级会员

帖子: 267
体力: 643
威望: 2
当前: 北京西城区
离线: 7 天

专长 前端制作,JS

24^# 大中小发表于 2008-4-9 17:16

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
	<a href="#" class="od" onclick = "show('fd');return false;">
		[打开层]
	</a>
	<a href="#" class="od" onclick = "closeed('fd');return false;">
		[关闭层]
	</a>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>	
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		//if(e.button == (document.all ? 1 : 0))
		//{
			mouseD = true;			
		//}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
		
			od.filters.alpha.opacity = 100;
		}
		else
		{
			
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		//if(e.button == (document.all ? 1 : 0))
		//{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
						
				od.filters.alpha.opacity = 50;
			}
			else
			{
				
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		//} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		//alert(mrx);
		//alert(e.button);		
		if(odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

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

修改好了。。。兼容opera了呵呵

本帖最近评分记录

caiying2007 威望 +1 谢谢分享原创内容 2008-4-10 11:40

qq:309322941-十三妖

TOP

92css

初级会员

帖子: 58
体力: 68
威望: 0
离线: 6 天

专长 市场,推广,媒介

25^# 大中小发表于 2008-4-9 17:26

引用:

原帖由 thirdteendevil 于 2008-4-9 17:16 发表

专为懒人准备
兼容opera且单按键的版本跟进

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
</style>
</head>
<body>
<div id="bodyL"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<a href="#" class="od" id="a" onclick="document.getElementById('b').style.display = 'block';this.style.display = 'none';show('fd');"/>[打开层]</a>
	<a href="#" class="od" style="display:none;" id="b" onclick="document.getElementById('a').style.display = 'block';this.style.display = 'none';closeed('fd');"/>[关闭层]</a>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>	
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		//if(e.button == (document.all ? 1 : 0))
		//{
			mouseD = true;			
		//}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
		
			od.filters.alpha.opacity = 100;
		}
		else
		{
			
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		//if(e.button == (document.all ? 1 : 0))
		//{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
						
				od.filters

动画效果打开层 关闭层

引用:

引用:

动画效果打开层关闭层