歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

Linux編程

jQuery實現數字滾動效果

jQuery中的(function($){...})(jQuery)

JQuery打造下拉框聯動效果

jQuery+CSS實現的菜單效果

jQuery使容器自適應浏覽器窗口

jQuery的插件 --- 對話框的效果 （有遮罩效果）

jQuery實做拖拉層移動效果

jQuery實戰-級聯下拉框

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved