溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

瀏覽器窗口放大縮小后頁面內容居中解決方法

發(fā)布時間：2020-07-25 10:48:38 來源：網絡 閱讀：3323 作者：楊浩晨 欄目：web開發(fā)

 先說下簡單的思路：

1.獲得窗口的大小，高度，寬度。

2.要知道顯示的圖片（我這里用圖片舉例）的大小，寬，高。（我的圖片顯示設置為 寬：960，高600 ）

3.簡單算法，獲得的瀏覽器寬，高 減去 圖片的寬，高 除以2 就是 間隔距離了。

4.當然還有獲得窗口放大，縮小的事件了。根據(jù)事件來設置（margin）。

首先將圖片弄到body里面，代碼如下：

  1. <body> 
  2.  <div id="_total">  
  3.   
  4.  <div id="_back"> 
  5.    <img id="_mag" src="p_w_picpaths/1.jpg"/> 
  6.   </div> 
  7.    
  8.  </div> 
  9.  </body> 
 body 里面就只有兩個div 圖片套了一下。   加點 CSS 樣式：（吐槽下：我對CSS 不專業(yè)。） 
  1. <style type="text/css"> 
  2.    #_back{ 
  3.     border:#F00 1px solid; 
  4.     z-index:0; 
  5.     text-align:center; 
  6.     padding:0px 0px 0px 0px; 
  7.    } 
  8.     
  9.    #_total { 
  10.     width:960px; 
  11.     height:600px 
  12.     border: 1px solid black; 
  13.     position: relative; 
  14.     padding:0px 0px 0px 0px; 
  15.    } 
  16.     
  17.    #_mag { 
  18.     width:960px; 
  19.     height:600px 
  20.     padding:0px 0px 0px 0px; 
  21.    } 
  22.     
  23.  </style> 
重點是下面的代碼：  
  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2.  <script type="text/javascript" src="js/jquery.ba-resize.js"></script> 

先解釋下： jquery自帶的 resize() 方法是可以監(jiān)聽窗口放大縮小事件的。 但是我在網上搜索了下：jquery 自帶的 resize(） 方法在IE下會執(zhí)行兩次。   下面的這些代碼是 W3CSCHOOL 上面的樣例源碼，測試之 resize() 方法是執(zhí)行的兩次。  
  1. <head> 
  2.  <script type="text/javascript" src="js/jquery.js"></script> 
  3.  <script type="text/javascript"> 
  4.   x=0; 
  5.  $(document).ready(function(){ 
  6.  $(window).resize(function() { 
  7.    $("span").text(x+=1); 
  8.  }); 
  9.   
  10. }); 
  11.  </script> 
  12.  </head> 
  13.  <body> 
  14.  <p>窗口大小被調整過 <span>0</span> 次。</p> 
  15.  <p>請試著重新調整瀏覽器窗口的大小。</p> 
  16.  </body> 


所以我在這里用了別人重寫的resize(）方法的插件。 jquery.ba-resize.js 這里是插件的下載地址：點擊下載 用這個插件直接一樣的 $("selecter").resize(handler); 語法寫。 下面就是js代碼了。  
  1. <script type="text/javascript"> 
  2.   $(document).ready(function(){ 
  3.   
  4.   // 這里是窗口剛剛打開的時候，頁面中的圖片就要居中顯示。 
  5.    //網頁可見區(qū)域寬：  
  6.   var width = document.documentElement.clientWidth; 
  7.    //網頁可見區(qū)域高：  
  8.   var height = document.documentElement.clientHeight 
  9.     
  10.    var n = height - 600; 
  11.    if (n > 0) { 
  12.     n = n / 2; 
  13.     n += "px"; 
  14.     $("#_total").css("margin-top",n); 
  15.    } 
  16.    // 這里控制的是 margin-top 屬性 
  17.   
  18.  // 其實 < 0 的時候不用考慮 圖片的高度，直接 margin-top = 0px 就可以了。我這里是改變了圖片顯示的高度。 
  19.    if (n < 0) { 
  20.     $("#_total").css("margin-top","0px"); 
  21.     height += "px"; 
  22.     $("#_total").css("height",height); 
  23.    } 
  24.     
  25.    // 同樣的 判斷寬 
  26.    var aw = width - 960; 
  27.     
  28.    if (aw > 0) { 
  29.     aw = aw/2; 
  30.     aw += "px"; 
  31.     $("#_total").css("margin-left", aw); 
  32.      }  
  33.  
  34.  
  35.   if (aw < 0){ 
  36.     $("#_total").css("margin-left", "0px"); 
  37.    } 
  38.     
  39.   
  40. // 這里就是 監(jiān)控 窗口放大縮小的事件了。 
  41.   
  42. $(window).resize(function(){ 
  43.   
  44.  // 一樣的 獲得當前的 高度和寬度 
  45.   
  46. // 重點說下這個 document.documentElement.clientWidth 如果在<html>標簽上面沒有寫 <!DOCTYPE html> 這句話。 
  47.   
  48. //document.documentElement.clientWidth 在IE下是獲取不到值得，鑒于規(guī)范，還是寫上這句 <!DOCTYPE html> 
  49.     var _width = document.documentElement.clientWidth; 
  50.     var _height = document.documentElement.clientHeight; 
  51.      
  52.    var w = _width - 960; 
  53.     var h = _height - 600; 
  54.   
  55.    if (w > 0) { 
  56.      w = w/2; 
  57.      w+= "px"; 
  58.      $("#_total").css("margin-left", w); 
  59.     }  
  60.    if(w < 0) { 
  61.      $("#_total").css("margin-left", "0px"); 
  62.     } 
  63.      
  64.    if (h > 0) { 
  65.      h = h/2; 
  66.      h+="px"; 
  67.      $("#_total").css("margin-top", h); 
  68.     } 
  69.     if (h < 0) { 
  70.      $("#_total").css("margin-top", "0px");  
  71.    } 
  72.    }); 
  73.   
  74.  
  75.  }); 
  76.  </script> 
 
這是我想出的方法來解決這個問題。希望能夠看懂。
如果有更好的防解決 “窗口放大縮小后內容居中的問題”可以相互討論。
源碼我會上傳的。附件是源碼。
百度網盤下載地址

 

附件：http://down.51cto.com/data/2362175
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手