点击链接弹出层并能拖动

作者：佚名特效来源：网络收集点击数：更新时间：2008-5-25

<!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; } #fd1, #fd2, #fd3{ border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left; } #fd1{ width:500px; height:700px; background:#EDF1F8; } #fd2{ width:200px; height:400px; background:#EDF1F8; } #fd3{ width:400px; height:300px; background-color:#EDE9EC; border:2px solid #A65A9D; } .content{ padding:10px; } </style> </head> <body> <div class="bodyL"> <a href="#" onclick = "show('fd1');return false;"> <br /> <br /> <br /> [打开层1] </a> </div> <div id="fd1" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble"> <div class="content"><div class="title_close1" onclick = closeed('fd1');return false;">关闭</div><br /> 移动层1<br /></div> </div> <div class="bodyL"> <a href="#" onclick = "show('fd2');return false;"> <br /> <br /> <br /> [打开层2] </a> </div> <div id="fd2" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble"> <div class="content"><div class="title_close1" onclick = closeed('fd2');return false;">关闭</div><br /> 移动层2<br /></div> </div> <div class="bodyL"> <a href="#" onclick = "show('fd3');return false;"> <br /> <br /> <br /> [打开层3] </a> </div> <div id="fd3" style="display:none;filter:alpha(opacity=100);opacity:1;" class="dragAble"> <div class="content"><div class="title_close1" onclick = closeed('fd3');return false;">关闭</div><br /> 移动层3<br /></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 ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var y,x; var oDragObj; var index=100; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className=="dragAble") { isdrag = true; oDragObj = oDragHandle; oDragObj.style.zIndex = ++index; nTY = parseInt(oDragObj.style.top+0); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left+0); x = nn6 ? e.clientX : event.clientX; document.onmousemove=moveMouse; return false; } } document.onmousedown=initDrag; document.onmouseup=new Function("isdrag=false"); </script> </body> </html>

我要发布加入收藏告诉好友打印此文关闭窗口返回顶部

上一篇特效：点击弹出窗口层，并且背景变暗渐变

下一篇特效：围绕鼠标旋转的三叶空间旋浆

超宇网络

点击链接弹出层并能拖动

点击排行