宜宾网站建设公司

浏览器窗口放大缩小后页面内容居中解决方法

 先说下简单的思路：

创新互联建站长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为乐亭企业提供专业的成都做网站、网站制作，乐亭网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

1.获得窗口的大小，高度，宽度。

2.要知道显示的图片（我这里用图片举例）的大小，宽，高。（我的图片显示设置为 宽：960，高600 ）

3.简单算法，获得的浏览器宽，高 减去 图片的宽，高 除以2 就是 间隔距离了。

4.当然还有获得窗口放大，缩小的事件了。根据事件来设置（margin）。

首先将图片弄到body里面，代码如下：

  1.  
  2.    
  3.   
  4.   
  5.     
  6.   
 
  •    
  •  
    •  
  •   
    • body 里面就只有两个div 图片套了一下。加点 CSS 样式：（吐槽下：我对CSS 不专业。）
    1.  
    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.   
    重点是下面的代码：
    1.  
    2.   

    先解释下： jquery自带的 resize() 方法是可以监听窗口放大缩小事件的。 但是我在网上搜索了下：jquery 自带的 resize(） 方法在IE下会执行两次。下面的这些代码是 W3CSCHOOL 上面的样例源码，测试之 resize() 方法是执行的两次。
    1.  
    2.   
    3.   
    4.   x=0; 
    5.  $(document).ready(function(){ 
    6.  $(window).resize(function() { 
    7.    $("span").text(x+=1); 
    8.  }); 
    9.   
    10. }); 
    11.   
    12.   
    13.   
    14.  
      窗口大小被调整过 0 次。
       
    15.  
      请试着重新调整浏览器窗口的大小。
       
    16.   


    所以我在这里用了别人重写的resize(）方法的插件。 jquery.ba-resize.js 这里是插件的下载地址：点击下载用这个插件直接一样的 $("selecter").resize(handler); 语法写。下面就是js代码了。
    1.  
    2.   $(document).ready(function(){ 
    3.   
    4.   // 这里是窗口刚刚打开的时候，页面中的图片就要居中显示。 
    5.    //网页可见区域宽：  
    6.   var width = document.documentElement.clientWidth; 
    7.    //网页可见区域高：  
    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. // 这里就是 监控 窗口放大缩小的事件了。 
    41.   
    42. $(window).resize(function(){ 
    43.   
    44.  // 一样的 获得当前的 高度和宽度 
    45.   
    46. // 重点说下这个 document.documentElement.clientWidth 如果在标签上面没有写  这句话。 
    47.   
    48. //document.documentElement.clientWidth 在IE下是获取不到值得，鉴于规范，还是写上这句  
    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.   
    这是我想出的方法来解决这个问题。希望能够看懂。
    如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。
    源码我会上传的。附件是源码。
    百度网盘下载地址

     

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

    网页题目：浏览器窗口放大缩小后页面内容居中解决方法
    链接地址：http://hbruida.cn/article/gpioeg.html

    其他资讯