js动画效果打开层关闭层

<!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="#" _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%0A%20%20%20%20var%20prox%3B%20%0D%0A%20%20%20%20var%20proy%3B%20%0D%0A%20%20%20%20var%20proxc%3B%20%0D%0A%20%20%20%20var%20proyc%3B%20%0D%0A%20%20%20%20function%20show(id)%7B%2F*--%E6%89%93%E5%BC%80--*%2F%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(prox)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proy)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proxc)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proyc)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20document.getElementById(id)%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.display%20%3D%20%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.width%20%3D%20%221px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.height%20%3D%20%221px%22%3B%20%20%0D%0A%20%20%20%20%20%20%20%20prox%20%3D%20setInterval(function()%7Bopenx(o%2C500)%7D%2C10)%3B%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20openx(o%2Cx)%7B%2F*--%E6%89%93%E5%BC%80x--*%2F%20%0D%0A%20%20%20%20%20%20%20%20var%20cx%20%3D%20parseInt(o.style.width)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(cx%20%3C%20x)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.width%20%3D%20(cx%20%2B%20Math.ceil((x-cx)%2F5))%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(prox)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20proy%20%3D%20setInterval(function()%7Bopeny(o%2C200)%7D%2C10)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20openy(o%2Cy)%7B%2F*--%E6%89%93%E5%BC%80y--*%2F%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20cy%20%3D%20parseInt(o.style.height)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(cy%20%3C%20y)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.height%20%3D%20(cy%20%2B%20Math.ceil((y-cy)%2F5))%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(proy)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20closeed(id)%7B%2F*--%E5%85%B3%E9%97%AD--*%2F%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(prox)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proy)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proxc)%3B%20%0D%0A%20%20%20%20%20%20%20%20clearInterval(proyc)%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20document.getElementById(id)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(o.style.display%20%3D%3D%20%22block%22)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20proyc%20%3D%20setInterval(function()%7Bclosey(o)%7D%2C10)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20closey(o)%7B%2F*--%E6%89%93%E5%BC%80y--*%2F%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20cy%20%3D%20parseInt(o.style.height)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(cy%20%3E%200)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.height%20%3D%20(cy%20-%20Math.ceil(cy%2F5))%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(proyc)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20proxc%20%3D%20setInterval(function()%7Bclosex(o)%7D%2C10)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20closex(o)%7B%2F*--%E6%89%93%E5%BC%80x--*%2F%20%0D%0A%20%20%20%20%20%20%20%20var%20cx%20%3D%20parseInt(o.style.width)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(cx%20%3E%200)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.width%20%3D%20(cx%20-%20Math.ceil(cx%2F5))%20%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(proxc)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F*-------------------------%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8---------------------*%2F%20%20%20%20%20%0D%0A%20%20%20%20var%20od%20%3D%20document.getElementById(%22fd%22)%3B%20%20%20%20%20%0D%0A%20%20%20%20var%20dx%2Cdy%2Cmx%2Cmy%2CmouseD%3B%20%0D%0A%20%20%20%20var%20odrag%3B%20%0D%0A%20%20%20%20var%20isIE%20%3D%20document.all%20%3F%20true%20%3A%20false%3B%20%0D%0A%20%20%20%20document.onmousedown%20%3D%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0A%20%20%20%20%20%20%20%20if(e.button%20%3D%3D%20(document.all%20%3F%201%20%3A%200))%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mouseD%20%3D%20true%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.onmouseup%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20mouseD%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20odrag%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20if(isIE)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.releaseCapture()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.filters.alpha.opacity%20%3D%20100%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.releaseEvents(od.MOUSEMOVE)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.style.opacity%20%3D%201%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2Ffunction%20readyMove(e)%7B%20%20%20%20%20%0D%0A%20%20%20%20od.onmousedown%20%3D%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20odrag%20%3D%20this%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0A%20%20%20%20%20%20%20%20if(e.button%20%3D%3D%20(document.all%20%3F%201%20%3A%200))%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mx%20%3D%20e.clientX%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20my%20%3D%20e.clientY%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.style.left%20%3D%20od.offsetLeft%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.style.top%20%3D%20od.offsetTop%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(isIE)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20od.setCapture()%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20od.filters.alpha.opacity%20%3D%2050%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.captureEvents(Event.MOUSEMOVE)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20od.style.opacity%20%3D%200.5%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Falert(mx)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Falert(my)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.onmousemove%20%3D%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20e%20%3F%20e%20%3A%20event%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Falert(mrx)%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Falert(e.button)%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20if(mouseD%3D%3Dtrue%20%26%26%20odrag)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20mrx%20%3D%20e.clientX%20-%20mx%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20mry%20%3D%20e.clientY%20-%20my%3B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.style.left%20%3D%20parseInt(od.style.left)%20%2Bmrx%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20od.style.top%20%3D%20parseInt(od.style.top)%20%2B%20mry%20%2B%20%22px%22%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mx%20%3D%20e.clientX%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20my%20%3D%20e.clientY%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

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

教程首页更多教程

js动画效果打开层 关闭层

js动画效果打开层关闭层