DIV层之拖动、关闭、打开效果代码

<!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>div托动，打开，关闭效果</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="#" _ewebeditor_ta_href="%23" class="od" onclick = "show('fd');return false;"> 
[打开层] 
</a> 
<a href="#" _ewebeditor_ta_href="%23" 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>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20prox%3B%20%0D%0Avar%20proy%3B%20%0D%0Avar%20proxc%3B%20%0D%0Avar%20proyc%3B%20%0D%0Afunction%20show(id)%7B%2F*--%E6%89%93%E5%BC%80--*%2F%20%0D%0AclearInterval(prox)%3B%20%0D%0AclearInterval(proy)%3B%20%0D%0AclearInterval(proxc)%3B%20%0D%0AclearInterval(proyc)%3B%20%0D%0Avar%20o%20%3D%20document.getElementById(id)%3B%20%0D%0Ao.style.display%20%3D%20%22block%22%3B%20%0D%0Ao.style.width%20%3D%20%221px%22%3B%20%0D%0Ao.style.height%20%3D%20%221px%22%3B%20%0D%0Aprox%20%3D%20setInterval(function()%7Bopenx(o%2C500)%7D%2C10)%3B%20%0D%0A%7D%20%0D%0Afunction%20openx(o%2Cx)%7B%2F*--%E6%89%93%E5%BC%80x--*%2F%20%0D%0Avar%20cx%20%3D%20parseInt(o.style.width)%3B%20%0D%0Aif(cx%20%3C%20x)%20%0D%0A%7B%20%0D%0Ao.style.width%20%3D%20(cx%20%2B%20Math.ceil((x-cx)%2F5))%20%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AclearInterval(prox)%3B%20%0D%0Aproy%20%3D%20setInterval(function()%7Bopeny(o%2C200)%7D%2C10)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20openy(o%2Cy)%7B%2F*--%E6%89%93%E5%BC%80y--*%2F%20%0D%0Avar%20cy%20%3D%20parseInt(o.style.height)%3B%20%0D%0Aif(cy%20%3C%20y)%20%0D%0A%7B%20%0D%0Ao.style.height%20%3D%20(cy%20%2B%20Math.ceil((y-cy)%2F5))%20%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AclearInterval(proy)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20closeed(id)%7B%2F*--%E5%85%B3%E9%97%AD--*%2F%20%0D%0AclearInterval(prox)%3B%20%0D%0AclearInterval(proy)%3B%20%0D%0AclearInterval(proxc)%3B%20%0D%0AclearInterval(proyc)%3B%20%0D%0Avar%20o%20%3D%20document.getElementById(id)%3B%20%0D%0Aif(o.style.display%20%3D%3D%20%22block%22)%20%0D%0A%7B%20%0D%0Aproyc%20%3D%20setInterval(function()%7Bclosey(o)%7D%2C10)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20closey(o)%7B%2F*--%E6%89%93%E5%BC%80y--*%2F%20%0D%0Avar%20cy%20%3D%20parseInt(o.style.height)%3B%20%0D%0Aif(cy%20%3E%200)%20%0D%0A%7B%20%0D%0Ao.style.height%20%3D%20(cy%20-%20Math.ceil(cy%2F5))%20%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AclearInterval(proyc)%3B%20%0D%0Aproxc%20%3D%20setInterval(function()%7Bclosex(o)%7D%2C10)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20closex(o)%7B%2F*--%E6%89%93%E5%BC%80x--*%2F%20%0D%0Avar%20cx%20%3D%20parseInt(o.style.width)%3B%20%0D%0Aif(cx%20%3E%200)%20%0D%0A%7B%20%0D%0Ao.style.width%20%3D%20(cx%20-%20Math.ceil(cx%2F5))%20%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AclearInterval(proxc)%3B%20%0D%0Ao.style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%2F*-------------------------%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8---------------------*%2F%20%0D%0Avar%20od%20%3D%20document.getElementById(%22fd%22)%3B%20%0D%0Avar%20dx%2Cdy%2Cmx%2Cmy%2CmouseD%3B%20%0D%0Avar%20odrag%3B%20%0D%0Avar%20isIE%20%3D%20document.all%20%3F%20true%20%3A%20false%3B%20%0D%0Adocument.onmousedown%20%3D%20function(e)%7B%20%0D%0Avar%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0Aif(e.button%20%3D%3D%20(document.all%20%3F%201%20%3A%200))%20%0D%0A%7B%20%0D%0AmouseD%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%7B%20%0D%0AmouseD%20%3D%20false%3B%20%0D%0Aodrag%20%3D%20%22%22%3B%20%0D%0Aif(isIE)%20%0D%0A%7B%20%0D%0Aod.releaseCapture()%3B%20%0D%0Aod.filters.alpha.opacity%20%3D%20100%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Awindow.releaseEvents(od.MOUSEMOVE)%3B%20%0D%0Aod.style.opacity%20%3D%201%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%2F%2Ffunction%20readyMove(e)%7B%20%0D%0Aod.onmousedown%20%3D%20function(e)%7B%20%0D%0Aodrag%20%3D%20this%3B%20%0D%0Avar%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0Aif(e.button%20%3D%3D%20(document.all%20%3F%201%20%3A%200))%20%0D%0A%7B%20%0D%0Amx%20%3D%20e.clientX%3B%20%0D%0Amy%20%3D%20e.clientY%3B%20%0D%0Aod.style.left%20%3D%20od.offsetLeft%20%2B%20%22px%22%3B%20%0D%0Aod.style.top%20%3D%20od.offsetTop%20%2B%20%22px%22%3B%20%0D%0Aif(isIE)%20%0D%0A%7B%20%0D%0Aod.setCapture()%3B%20%0D%0Aod.filters.alpha.opacity%20%3D%2050%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE)%3B%20%0D%0Aod.style.opacity%20%3D%200.5%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2Falert(mx)%3B%20%0D%0A%2F%2Falert(my)%3B%20%0D%0A%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.onmousemove%20%3D%20function(e)%7B%20%0D%0Avar%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0A%0D%0A%2F%2Falert(mrx)%3B%20%0D%0A%2F%2Falert(e.button)%3B%20%0D%0Aif(mouseD%3D%3Dtrue%20%26%26%20odrag)%20%0D%0A%7B%20%0D%0Avar%20mrx%20%3D%20e.clientX%20-%20mx%3B%20%0D%0Avar%20mry%20%3D%20e.clientY%20-%20my%3B%20%0D%0Aod.style.left%20%3D%20parseInt(od.style.left)%20%2Bmrx%20%2B%20%22px%22%3B%20%0D%0Aod.style.top%20%3D%20parseInt(od.style.top)%20%2B%20mry%20%2B%20%22px%22%3B%20%0D%0Amx%20%3D%20e.clientX%3B%20%0D%0Amy%20%3D%20e.clientY%3B%20%0D%0A%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%3C%2Fscript%3E"> 
<<a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com">管理资源吧</a> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程