动画效果打开与关闭图层, 效果十分流畅

来自: 分享 作者: 水煮鱼 时间: 2010-11-12 11:37 查看: 10.1k 回复: 7

动画效果打开与关闭图层, 效果十分流畅, 用来做图片或产品展示一定很不错!

源代码:
  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. .content{
  55. padding:10px;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div id="bodyL">
  61. <a href="#" class="od" onclick = "show('fd');return false;">
  62.   [打开层]
  63. </a>
  64. <a href="#" class="od" onclick = "closeed('fd');return false;">
  65.   [关闭层]
  66. </a>
  67. </div>
  68. <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
  69. <div class="content">移动层</div>
  70. </div>

  71. <script type="text/javascript">
  72. var prox;
  73. var proy;
  74. var proxc;
  75. var proyc;
  76. function show(id){/*--打开--*/
  77.   clearInterval(prox);
  78.   clearInterval(proy);
  79.   clearInterval(proxc);
  80.   clearInterval(proyc);
  81.   var o = document.getElementById(id);
  82.   o.style.display = "block";
  83.   o.style.width = "1px";
  84.   o.style.height = "1px";
  85.   prox = setInterval(function(){openx(o,500)},10);
  86. }
  87. function openx(o,x){/*--打开x--*/
  88.   var cx = parseInt(o.style.width);
  89.   if(cx < x)
  90.   {
  91.    o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
  92.   }
  93.   else
  94.   {
  95.    clearInterval(prox);
  96.    proy = setInterval(function(){openy(o,200)},10);
  97.   }
  98. }
  99. function openy(o,y){/*--打开y--*/
  100.   var cy = parseInt(o.style.height);
  101.   if(cy < y)
  102.   {
  103.    o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
  104.   }
  105.   else
  106.   {
  107.    clearInterval(proy);   
  108.   }
  109. }
  110. function closeed(id){/*--关闭--*/
  111.   clearInterval(prox);
  112.   clearInterval(proy);
  113.   clearInterval(proxc);
  114.   clearInterval(proyc);  
  115.   var o = document.getElementById(id);
  116.   if(o.style.display == "block")
  117.   {
  118.    proyc = setInterval(function(){closey(o)},10);   
  119.   }  
  120. }
  121. function closey(o){/*--打开y--*/
  122.   var cy = parseInt(o.style.height);
  123.   if(cy > 0)
  124.   {
  125.    o.style.height = (cy - Math.ceil(cy/5)) +"px";
  126.   }
  127.   else
  128.   {
  129.    clearInterval(proyc);   
  130.    proxc = setInterval(function(){closex(o)},10);
  131.   }
  132. }
  133. function closex(o){/*--打开x--*/
  134.   var cx = parseInt(o.style.width);
  135.   if(cx > 0)
  136.   {
  137.    o.style.width = (cx - Math.ceil(cx/5)) +"px";
  138.   }
  139.   else
  140.   {
  141.    clearInterval(proxc);
  142.    o.style.display = "none";
  143.   }
  144. }


  145. /*-------------------------鼠标拖动---------------------*/
  146. var od = document.getElementById("fd");
  147. var dx,dy,mx,my,mouseD;
  148. var odrag;
  149. var isIE = document.all ? true : false;
  150. document.onmousedown = function(e){
  151.   var e = e ? e : event;
  152.   if(e.button == (document.all ? 1 : 0))
  153.   {
  154.    mouseD = true;   
  155.   }
  156. }
  157. document.onmouseup = function(){
  158.   mouseD = false;
  159.   odrag = "";
  160.   if(isIE)
  161.   {
  162.    od.releaseCapture();
  163.    od.filters.alpha.opacity = 100;
  164.   }
  165.   else
  166.   {
  167.    window.releaseEvents(od.MOUSEMOVE);
  168.    od.style.opacity = 1;
  169.   }  
  170. }


  171. //function readyMove(e){
  172. od.onmousedown = function(e){
  173.   odrag = this;
  174.   var e = e ? e : event;
  175.   if(e.button == (document.all ? 1 : 0))
  176.   {
  177.    mx = e.clientX;
  178.    my = e.clientY;
  179.    od.style.left = od.offsetLeft + "px";
  180.    od.style.top = od.offsetTop + "px";
  181.    if(isIE)
  182.    {
  183.     od.setCapture();   
  184.     od.filters.alpha.opacity = 50;
  185.    }
  186.    else
  187.    {
  188.     window.captureEvents(Event.MOUSEMOVE);
  189.     od.style.opacity = 0.5;
  190.    }
  191.    
  192.    //alert(mx);
  193.    //alert(my);
  194.    
  195.   }
  196. }
  197. document.onmousemove = function(e){
  198.   var e = e ? e : event;
  199.   
  200.   //alert(mrx);
  201.   //alert(e.button);  
  202.   if(mouseD==true  &&  odrag)
  203.   {  
  204.    var mrx = e.clientX - mx;
  205.    var mry = e.clientY - my;
  206.    od.style.left = parseInt(od.style.left) +mrx + "px";
  207.    od.style.top = parseInt(od.style.top) + mry + "px";   
  208.    mx = e.clientX;
  209.    my = e.clientY;
  210.    
  211.   }
  212. }


  213. </script>
  214. </body>
  215. </html>
复制代码
最新回复 7 条
xueling2011-4-6 21:46:02
回复 1# 水煮鱼


    这个好,谢谢
hope8882011-4-10 16:54:20
这个好,谢谢
32102011-7-16 21:56:53
不错不错   ...
东方棱侯2011-9-14 23:51:10
帖子不错 顶
onlinedear2011-9-14 23:52:39
这个快速回复怎么搞的啊
刘呆千2011-11-4 12:45:37
没有问题坚决支持
tengz7282011-12-26 12:15:29
谢谢 很受用!!!
您需要登录后才可以回帖 登录 | 注册
Smilies Code
高级模式