动态弹出DIV层

最新推荐文章于 2024-06-17 16:43:20 发布

原创最新推荐文章于 2024-06-17 16:43:20 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #generator #html #button #border

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现元素动态显示隐藏及鼠标拖拽的方法。通过编写简单的脚本，可以创建一个可交互的窗口，该窗口能平滑地展开和收起，并允许用户通过鼠标对其进行位置调整。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> #fd { width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow-y:auto; overflow-x:hidden; position:absolute; left:15px; top:26px; cursor:move; float:left; } </style> </HEAD> <BODY> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;color:#849BCA;"> <div style="padding:7px;font-weight:bold">缩减详情查看</div> <table style="width:100%;" id="xqInfo"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>简介</td> <td>学历</td> </tr> </table> </div> <input type="button" id="btn" value="打开详情" onclick = "show('fd');" /> </BODY> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; /*--打开--*/ function show(id) { btn.onclick = function(){closeed('fd');} btn.value = "关闭详情"; 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,600)},10); } /*--打开x--*/ function openx(o,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); } } /*--打开y--*/ function openy(o,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) { btn.onclick = function(){show('fd');} btn.value = "打开详情"; clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); if(o.style.display == "block") { proyc = setInterval(function(){closey(o)},10); } } /*--关闭y--*/ function closey(o) { 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); } } /*--关闭x--*/ function closex(o) { 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; } } 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; } } } document.onmousemove = function(e) { var e = e ? e : event; 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> </HTML>