动画效果打开层关闭层 [复制链接]

thirdteendevil　楼主

十三妖

高级会员

帖子: 325
体力: 1599
威望: 13

发表于 2008-4-7 14:12:16 |显示全部楼层

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

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

已有 1 人评分	威望	收起理由
cloudgamer	+ 1	谢谢分享

总评分: 威望 + 1 查看全部评分

		自动登录	找回密码
密码			注册

动画效果打开层 关闭层 [复制链接]

浏览过的帖子

浏览过的版块

动画效果打开层关闭层 [复制链接]