注册 登陆

动画效果打开关闭层

Written by 小锋 on 08-06-11 9:21 AM. JS

不错的效果大鸟哥发的

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>DOM_text01</title>  
  6. <style type="text/css">  
  7. body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}   
  8. #bodyL{   
  9.     float:left;   
  10.     width:84px;   
  11.     margin-right:2px;   
  12. }   
  13. a.od{   
  14.     width:80px;   
  15.     height:25px;   
  16.     line-height:25px;   
  17.     text-align:center;   
  18.     font-weight:bold;   
  19.     border: 2px solid #849BCA;     
  20.     display:block;   
  21.     color:#547BC9;   
  22.     float:left;   
  23.     text-decoration:none;   
  24.     margin-top:2px;   
  25. }   
  26. a.od:link{   
  27.     background:#EEF1F8;   
  28. }   
  29. a.od:visited{   
  30.     background:#EEF1F8;   
  31. }   
  32. a.od:hover{   
  33.     background:#EEE;   
  34. }   
  35. a.od:active{   
  36.     background:#EEE;   
  37. }   
  38. #fd{       
  39.     width:500px;   
  40.     height:200px;   
  41.     background:#EDF1F8;    
  42.     border: 2px solid #849BCA;   
  43.     margin-top:2px;   
  44.     margin-left:2px;   
  45.     float:left;   
  46.     overflow:hidden;   
  47.     position:absolute;   
  48.     left:0px;   
  49.     top:0px;   
  50.     cursor:move;   
  51.     float:left;   
  52.     /*filter:alpha(opacity=50);*/   
  53.        
  54. }   
  55. .content{   
  56.     padding:10px;   
  57. }   
  58. </style>  
  59. </head>  
  60. <body>  
  61. <div id="bodyL">  
  62.     <a href="#" class="od" onclick = "show('fd');return false;">  
  63.         [打开层]   
  64.     </a>  
  65.     <a href="#" class="od" onclick = "closeed('fd');return false;">  
  66.         [关闭层]   
  67.     </a>  
  68. </div>     
  69. <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">  
  70.     <div class="content">移动层</div>     
  71. </div>  
  72.        
  73. <script type="text/javascript">  
  74.     var prox;   
  75.     var proy;   
  76.     var proxc;   
  77.     var proyc;   
  78.     function show(id){/*--打开--*/   
  79.         clearInterval(prox);   
  80.         clearInterval(proy);   
  81.         clearInterval(proxc);   
  82.         clearInterval(proyc);   
  83.         var o = document.getElementById(id);   
  84.         o.style.display = "block";   
  85.         o.style.width = "1px";   
  86.         o.style.height = "1px";    
  87.         prox = setInterval(function(){openx(o,500)},10);   
  88.     }      
  89.     function openx(o,x){/*--打开x--*/   
  90.         var cx = parseInt(o.style.width);   
  91.         if(cx < x)   
  92.         {   
  93.             o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";   
  94.         }   
  95.         else   
  96.         {   
  97.             clearInterval(prox);   
  98.             proy = setInterval(function(){openy(o,200)},10);   
  99.         }   
  100.     }      
  101.     function openy(o,y){/*--打开y--*/    
  102.         var cy = parseInt(o.style.height);   
  103.         if(cy < y)   
  104.         {   
  105.             o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";   
  106.         }   
  107.         else   
  108.         {   
  109.             clearInterval(proy);               
  110.         }   
  111.     }      
  112.     function closeed(id){/*--关闭--*/   
  113.         clearInterval(prox);   
  114.         clearInterval(proy);   
  115.         clearInterval(proxc);   
  116.         clearInterval(proyc);          
  117.         var o = document.getElementById(id);   
  118.         if(o.style.display == "block")   
  119.         {   
  120.             proyc = setInterval(function(){closey(o)},10);             
  121.         }          
  122.     }      
  123.     function closey(o){/*--打开y--*/     
  124.         var cy = parseInt(o.style.height);   
  125.         if(cy > 0)   
  126.         {   
  127.             o.style.height = (cy - Math.ceil(cy/5)) +"px";   
  128.         }   
  129.         else   
  130.         {   
  131.             clearInterval(proyc);                  
  132.             proxc = setInterval(function(){closex(o)},10);   
  133.         }   
  134.     }      
  135.     function closex(o){/*--打开x--*/   
  136.         var cx = parseInt(o.style.width);   
  137.         if(cx > 0)   
  138.         {   
  139.             o.style.width = (cx - Math.ceil(cx/5)) +"px";   
  140.         }   
  141.         else   
  142.         {   
  143.             clearInterval(proxc);   
  144.             o.style.display = "none";   
  145.         }   
  146.     }      
  147.        
  148.        
  149.     /*-------------------------鼠标拖动---------------------*/     
  150.     var od = document.getElementById("fd");    
  151.     var dx,dy,mx,my,mouseD;   
  152.     var odrag;   
  153.     var isIE = document.all ? true : false;   
  154.     document.onmousedown = function(e){   
  155.         var ee = e ? e : event;   
  156.         if(e.button == (document.all ? 1 : 0))   
  157.         {   
  158.             mouseD = true;             
  159.         }   
  160.     }   
  161.     document.onmouseup = function(){   
  162.         mouseD = false;   
  163.         odrag = "";   
  164.         if(isIE)   
  165.         {   
  166.             od.releaseCapture();   
  167.             od.filters.alpha.opacity = 100;   
  168.         }   
  169.         else   
  170.         {   
  171.             window.releaseEvents(od.MOUSEMOVE);   
  172.             od.style.opacity = 1;   
  173.         }          
  174.     }   
  175.        
  176.        
  177.     //function readyMove(e){       
  178.     od.onmousedown = function(e){   
  179.         odrag = this;   
  180.         var ee = e ? e : event;   
  181.         if(e.button == (document.all ? 1 : 0))   
  182.         {   
  183.             mx = e.clientX;   
  184.             my = e.clientY;   
  185.             odod.style.left = od.offsetLeft + "px";   
  186.             odod.style.top = od.offsetTop + "px";   
  187.             if(isIE)   
  188.             {   
  189.                 od.setCapture();                   
  190.                 od.filters.alpha.opacity = 50;   
  191.             }   
  192.             else   
  193.             {   
  194.                 window.captureEvents(Event.MOUSEMOVE);   
  195.                 od.style.opacity = 0.5;   
  196.             }   
  197.                
  198.             //alert(mx);   
  199.             //alert(my);   
  200.                
  201.         }    
  202.     }   
  203.     document.onmousemove = function(e){   
  204.         var ee = e ? e : event;   
  205.            
  206.         //alert(mrx);   
  207.         //alert(e.button);         
  208.         if(mouseD==true && odrag)   
  209.         {          
  210.             var mrx = e.clientX - mx;   
  211.             var mry = e.clientY - my;      
  212.             od.style.left = parseInt(od.style.left) +mrx + "px";   
  213.             od.style.top = parseInt(od.style.top) + mry + "px";            
  214.             mx = e.clientX;   
  215.             my = e.clientY;   
  216.                
  217.         }   
  218.     }   
  219.        
  220.        
  221. </script>  
  222. </body>  
  223. </html>  

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):