动画效果打开层和关闭层

时间：2010-02-05 11:15:48 来源：评论：加载中... 点击：加载中...

动画效果打开层/关闭层：<script>//获取一个对象function getByid(id) {if (document.getElementById) {return document.getElement...

动画效果打开层/关闭层：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><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><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>

提示：可先修改再运行，如无效果，请刷新页面！

相关热词搜索：

收藏到网摘：

上一篇：javascript的40种网页常用小技巧
下一篇：三维正方体(兼容ie/ff浏览器)

收藏将此文推荐给朋友

分享到：

推荐资讯

频道总排行

本频道月排行

评论排行

动画效果 打开层和关闭层 - javascript -

动画效果 打开层和关闭层

动画效果打开层和关闭层 - javascript -

动画效果打开层和关闭层