瀏覽器窗口放大縮小后頁(yè)面內(nèi)容居中解決方法

先說下簡(jiǎn)單的思路：

創(chuàng)新互聯(lián)建站長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為樂亭企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，樂亭網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

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

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

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

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

<body> 
 <div id="_total">  
  
 <div id="_back"> 
   <img id="_mag" src="p_w_picpaths/1.jpg"/> 
  </div> 
   
 </div> 
 </body> 
 body 里面就只有兩個(gè)div 圖片套了一下。加點(diǎn) CSS 樣式：（吐槽下：我對(duì)CSS 不專業(yè)。）

<style type="text/css"> 
   #_back{ 
    border:#F00 1px solid; 
    z-index:0; 
    text-align:center; 
    padding:0px 0px 0px 0px; 
   } 
    
   #_total { 
    width:960px; 
    height:600px 
    border: 1px solid black; 
    position: relative; 
    padding:0px 0px 0px 0px; 
   } 
    
   #_mag { 
    width:960px; 
    height:600px 
    padding:0px 0px 0px 0px; 
   } 
    
 </style>

重點(diǎn)是下面的代碼：

<script type="text/javascript" src="js/jquery.js"></script> 
 <script type="text/javascript" src="js/jquery.ba-resize.js"></script>


先解釋下： jquery自帶的 resize() 方法是可以監(jiān)聽窗口放大縮小事件的。 但是我在網(wǎng)上搜索了下：jquery 自帶的 resize(） 方法在IE下會(huì)執(zhí)行兩次。下面的這些代碼是 W3CSCHOOL 上面的樣例源碼，測(cè)試之 resize() 方法是執(zhí)行的兩次。

<head> 
 <script type="text/javascript" src="js/jquery.js"></script> 
 <script type="text/javascript"> 
  x=0; 
 $(document).ready(function(){ 
 $(window).resize(function() { 
   $("span").text(x+=1); 
 }); 
  
}); 
 </script> 
 </head> 
 <body> 
 <p>窗口大小被調(diào)整過 <span>0</span> 次。</p> 
 <p>請(qǐng)?jiān)囍匦抡{(diào)整瀏覽器窗口的大小。</p> 
 </body> 


所以我在這里用了別人重寫的resize(）方法的插件。 jquery.ba-resize.js 這里是插件的下載地址：點(diǎn)擊下載用這個(gè)插件直接一樣的 $("selecter").resize(handler); 語(yǔ)法寫。下面就是js代碼了。

<script type="text/javascript"> 
  $(document).ready(function(){ 
  
  // 這里是窗口剛剛打開的時(shí)候，頁(yè)面中的圖片就要居中顯示。 
   //網(wǎng)頁(yè)可見區(qū)域?qū)挘?nbsp; 
  var width = document.documentElement.clientWidth; 
   //網(wǎng)頁(yè)可見區(qū)域高：  
  var height = document.documentElement.clientHeight 
    
   var n = height - 600; 
   if (n > 0) { 
    n = n / 2; 
    n += "px"; 
    $("#_total").css("margin-top",n); 
   } 
   // 這里控制的是 margin-top 屬性 
  
 // 其實(shí) < 0 的時(shí)候不用考慮 圖片的高度，直接 margin-top = 0px 就可以了。我這里是改變了圖片顯示的高度。 
   if (n < 0) { 
    $("#_total").css("margin-top","0px"); 
    height += "px"; 
    $("#_total").css("height",height); 
   } 
    
   // 同樣的 判斷寬 
   var aw = width - 960; 
    
   if (aw > 0) { 
    aw = aw/2; 
    aw += "px"; 
    $("#_total").css("margin-left", aw); 
     }  
 
 
  if (aw < 0){ 
    $("#_total").css("margin-left", "0px"); 
   } 
    
  
// 這里就是 監(jiān)控 窗口放大縮小的事件了。 
  
$(window).resize(function(){ 
  
 // 一樣的 獲得當(dāng)前的 高度和寬度 
  
// 重點(diǎn)說下這個(gè) document.documentElement.clientWidth 如果在<html>標(biāo)簽上面沒有寫 <!DOCTYPE html> 這句話。 
  
//document.documentElement.clientWidth 在IE下是獲取不到值得，鑒于規(guī)范，還是寫上這句 <!DOCTYPE html> 
    var _width = document.documentElement.clientWidth; 
    var _height = document.documentElement.clientHeight; 
     
   var w = _width - 960; 
    var h = _height - 600; 
  
   if (w > 0) { 
     w = w/2; 
     w+= "px"; 
     $("#_total").css("margin-left", w); 
    }  
   if(w < 0) { 
     $("#_total").css("margin-left", "0px"); 
    } 
     
   if (h > 0) { 
     h = h/2; 
     h+="px"; 
     $("#_total").css("margin-top", h); 
    } 
    if (h < 0) { 
     $("#_total").css("margin-top", "0px");  
   } 
   }); 
  
 
 }); 
 </script>

這是我想出的方法來(lái)解決這個(gè)問題。希望能夠看懂。
如果有更好的防解決 “窗口放大縮小后內(nèi)容居中的問題”可以相互討論。
源碼我會(huì)上傳的。附件是源碼。
百度網(wǎng)盤下載地址

附件：http://down.51cto.com/data/2362175

網(wǎng)站題目：瀏覽器窗口放大縮小后頁(yè)面內(nèi)容居中解決方法
瀏覽路徑：http://jinyejixie.com/article46/gpioeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、企業(yè)建站、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

瀏覽器窗口放大縮小后頁(yè)面內(nèi)容居中解決方法