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

来自: 分享 作者: 水煮鱼 时间: 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);*/

  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>

  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. }


  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 e = 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. }


  177. //function readyMove(e){
  178. od.onmousedown = function(e){
  179.   odrag = this;
  180.   var e = e ? e : event;
  181.   if(e.button == (document.all ? 1 : 0))
  182.   {
  183.    mx = e.clientX;
  184.    my = e.clientY;
  185.    od.style.left = od.offsetLeft + "px";
  186.    od.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 e = 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. }


  221. </script>
  222. </body>
  223. </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
高级模式
水煮鱼

帖子 558 篇

关注 私信
热门主题更多
© 2006-2024 V2STUDIO