jQuery实战-窗口效果


jQuery实战-窗口效果:

window.html

  1. <html>  
  2. <head>  
  3. <title>窗口效果</title>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>  
  5. <link type=”text/css” rel=”stylesheet” href=”css/window.css” />  
  6. <script type=”text/javascript” src=”js/jquery.js”></script>  
  7. <script type=”text/javascript” src=”js/ window.js”></script>  
  8. </head>  
  9. <body>  
  10. <input type="button" value="左下角显示窗口" id="leftpop" />  
  11. <input type="button" value="屏幕中间显示窗口" id="centerpop" />  
  12. <div class="window">  
  13.     <div class="title" id="center">  
  14.         <img alt="关闭" src="images/close.gif" />  
  15.         我是中间显示窗口的标题栏   
  16. </div>  
  17.     <div class="content">  
  18.         我是中间显示窗口的内容区   
  19. </div>  
  20. </div>  
  21. <div class="window" id="left">  
  22.     <div class="title">          
  23. <img alt="关闭" src="image/close.gif" />  
  24.         我是左边显示窗口的标题栏   
  25. </div>  
  26.     <div class="content">  
  27.         我是左边显示窗口的内容区   
  28. </div>  
  29. </div>  
  30. <div class="window" id="right">  
  31.     <div class="title">  
  32. <img alt="关闭" src="image/close.gif" />  
  33.         我是右边显示窗口的标题栏   
  34. </div>  
  35.     <div class="content">  
  36.         我是右边显示窗口的内容区   
  37. </div>  
  38. </div>  
  39. </body>  
  40. </html>  

window.css

  1. .window {   
  2. background-color: #D0DEF0;   
  3. width: 250px;   
  4. /*padding: 2px;*/   
  5. margin: 5px;   
  6. position: absolute; /*控制窗口绝对定位*/   
  7. display:none;   
  8. }   
  9. .content {   
  10. height: 150px;   
  11. background-color: white;   
  12. border: 2px solid #D0DEF0;   
  13. padding: 2px;   
  14. overflow: auto; /*可显示滚动条*/   
  15. }   
  16. .title {   
  17. padding:4px;   
  18. font-size: 14px;   
  19. }   
  20. .title img {   
  21. width: 16px;   
  22. height: 16px;   
  23. float: right;   
  24. cursor: pointer;   
  25. }  

window.js

  1. $(document).ready(function() {   
  2. //1. 点击按钮可以在屏幕中间显示一个窗口   
  3.   
  4. //2. 点击按钮2可以在屏幕的左下角显示一个窗口   
  5. var contentwin = $("#center").mywin({left: "center", top: "center"});   
  6. var leftwin = $("#left").mywin({left: "left", top: "bottom"}, function() {   
  7.     leftwin.slideUp("slow");   
  8. } );   
  9. $("#contentpop").click(function(){   
  10.     //鼠标点击按钮之后，把id为center的窗口显示在页面中间   
  11.     //计算位于屏幕中间的窗口的左边界和上边界的值   
  12.     // 浏览器可视区域的宽和高，当前窗口的宽和高   
  13.   
  14.     contentwin.show("slow");   
  15. });   
  16. $("#leftpop").click(function() {   
  17.     leftwin.slideDown("slow");   
  18. }   
  19. });   
  20.   
  21. //position包含两个属性，一个是left，一个是top   
  22. //hidefunc表示执行窗口隐藏的方法   
  23. $.fn.mywin = function(position, hidefunc) {   
  24. if(position && position instanceof Object) {   
  25.     var positionleft = position.left;   
  26.     var positiontop = position.top;   
  27. var windowobj = $(window);   
  28. var browserwidth = $(window).width();   
  29.     var browserheight = $(window).height();   
  30.     var scrollLeft = $(window).scrollLeft();   
  31.     var scrollTop = $(windwo).scrollTop();   
  32. var currentwin = this;   
  33. var cwinwidth = currentwin.outerWidth(true);   
  34. var cwinheight = currentwin.outerHeight(true);   
  35. var left;   
  36. var top;   
  37.        
  38.     function calLeft(positionleft,scrollLeft,browsewidth,cwinwidth){   
  39.     if(positionleft && typeof positionleft == "string") {   
  40.         if(positionleft == "center") {   
  41.        left = scrollLeft + (browserwidth – cwinwidth) /2;   
  42.         }else if (positionleft == "left") {   
  43.             left = scrollLeft;   
  44.         }else if (positionleft == "right") {   
  45.             left = scrollLeft + browserwidth – cwinwidth;   
  46.         }else {   
  47.             left = scrollLeft + (browserwidth – cwinwidth) /2;   
  48.         }   
  49.     }else if(positionleft && typeof positionleft == "number" ) {   
  50.         left = positionleft;   
  51.     }else {   
  52.         left = 0;   
  53.     }   
  54.     currentwin.data("positionleft",positionleft);   
  55.     }   
  56. calLeft(positionleft,scrollLeft,browsewidth,cwinwidth)   
  57.   
  58. function calTop(positiontop,scrollTop,browseheight,cwinwidthheight) {   
  59. if(positiontop && typeof positiontop == "string") {   
  60.         if(positiontop == "center") {   
  61. top =scrollTop +  (browserheight – cwinheight) / 2;   
  62.         }else if (positiontop == "top") {   
  63.             top = scrollTop;   
  64.         }else if (positiontop == "bottom") {   
  65.             top = scrollTop + browseheight – cwinheight;   
  66.         }else {   
  67. top =scrollTop +  (browserheight – cwinheight) / 2;   
  68.         }   
  69.     } else if(positionleft && typeof positiontop == "number" ) {   
  70.         top = positionleft;   
  71.     }else {   
  72.         top = 0;   
  73.     }   
  74.     currentwin.data("positiontop",positiontop);   
  75.     }   
  76.     calTop(positiontop,scrollTop,browseheight,cwinwidthheight);   
  77.   
  78.     var scrollTimeout;   
  79.     $(window).scroll(function() {   
  80.         clearTimeout(scrollTimeout);   
  81.         scrollTimeout = setTimeout(function() { //延时处理   
  82. var browserwidth = $(window).width();   
  83.             var browserheight = $(window).height();   
  84.             var scrollLeft = $(window).scrollLeft();   
  85.             var scrollTop = $(windwo).scrollTop();   
  86.             calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);   
  87.             calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);   
  88.             currentwin.animate({   
  89.                 left: left,   
  90.                 top: top;   
  91. },300);   
  92.         },300);   
  93. });   
  94.   
  95. $(window).resize(function(){   
  96. var browserwidth = $(window).width();   
  97.         var browserheight = $(window).height();   
  98.         var scrollLeft = $(window).scrollLeft();   
  99.         var scrollTop = $(windwo).scrollTop();   
  100.         calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);   
  101.         calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);   
  102.         currentwin.animate({   
  103.                 left: left,   
  104.                 top: top;   
  105. },300);   
  106. });   
  107.   
  108. currentwin.css("left",left).css("top",top);   
  109. currentwin.children(".title").children("img").click(function(){   
  110.     if(!hidefunc) {   
  111.         currentwin.hide("slow");   
  112.     }else {   
  113.         hidefunc();   
  114.     }   
  115. });   
  116.   
  117. return currentwin; //返回当前对象，以便可以级联的执行其他方法   
  118. }   
  119. }  
  • 1
  • 2
  • 下一页

相关内容