JavaScript---动态打开和关闭层,而且还能拖拽

最新推荐文章于 2021-08-03 20:56:03 发布

huxiuliang

最新推荐文章于 2021-08-03 20:56:03 发布

阅读量74

点赞数

分类专栏： JavaScript 文章标签： JavaScript XHTML CSS HTML ViewUI

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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:100px;
	top:100px;
	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>

huxiuliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---动态打开和关闭层,而且还能拖拽

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;met
复制链接

扫一扫

专栏目录