js动画效果打开层关闭层

更新时间：2008年04月26日 21:53:26 作者：

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="#" 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现下拉列表效果
这篇文章主要为大家详细介绍了JavaScript实现下拉列表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
JS访问对象两种方式区别解析
这篇文章主要介绍了JS访问对象两种方式区别解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
JavaScript数组Array对象增加和删除元素方法总结
这篇文章主要介绍了JavaScript数组Array对象增加和删除元素方法,实例总结了pop方法、push方法、splice方法、concat方法等的使用技巧,需要的朋友可以参考下
2015-01-01
ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla
使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时，您遇到过麻烦吗？本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术，然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。
2008-04-04
JavaScript深拷贝和浅拷贝概念与用法实例分析
这篇文章主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
2018-06-06
JS使用canvas中的measureText方法测量字体宽度示例
这篇文章主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
2019-02-02
uniApp实现热更新的思路与详细过程
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段,下面这篇文章主要给大家介绍了关于uniApp实现热更新的思路与详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
JS中addEventListener的使用示例详解
addEventListener是JavaScript中的一个方法,用于向一个元素添加事件监听器,本文给大家介绍JS中addEventListener的使用示例代码,感兴趣的朋友跟随小编一起看看吧
2023-10-10
减少访问DOM的次数提升javascript性能
访问修改DOM元素都会导致浏览器重新计算页面的几何变化，下面为大家介绍下javascript性能提升方法,需要的朋友可以参考下
2014-02-02
JS中判断JSON数据是否存在某字段的方法
这篇文章主要介绍了JS中如何判断JSON数据是否存在某字段,需要的朋友可以参考下
2014-03-03