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

来源：互联网发布：mac 抹掉磁盘编辑：程序博客网时间：2024/05/29 08:09

先说下简单的思路：

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

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

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

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

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

（不知道怎么添加代码块，只有写出来了。）

body 里面就只有两个div 图片套了一下。

加点 CSS 样式：（吐槽下：我对CSS 不专业。）

重点是下面的代码：

先解释下：jquery自带的 resize() 方法是可以监听窗口放大缩小事件的。但是我在网上搜索了下：jquery 自带的 resize(）方法在IE下会执行两次。

下面的这些代码是 W3CSCHOOL 上面的样例源码，测试之 resize() 方法是执行的两次。

<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>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>

所以我在这里用了别人重写的resize(）方法的插件。 jquery.ba-resize.js

这个是插件的下载地址：点击打开链接。

用这个插件直接一样的 $("selecter").resize(handler); 语法写。

下面就是js代码了。

  // 这里是窗口刚刚打开的时候，页面中的图片就要居中显示。
  //网页可见区域宽：
  var width = document.documentElement.clientWidth;
  //网页可见区域高：
  var height = document.documentElement.clientHeight

  var n = height - 600;
  if (n > 0) {
   n = n / 2;
   n += "px";
   $("#_total").css("margin-top",n);
  }
  // 这里控制的是 margin-top 属性

// 其实 < 0 的时候不用考虑图片的高度，直接 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");
  }

// 这里就是监控窗口放大缩小的事件了。

$(window).resize(function(){

// 一样的获得当前的高度和宽度

// 重点说下这个 document.documentElement.clientWidth 如果在<html>标签上面没有写 <!DOCTYPE html> 这句话。

//document.documentElement.clientWidth 在IE下是获取不到值得，鉴于规范，还是写上这句 <!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>

这是我想出的方法来解决这个问题。希望能够看懂。

如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。

转载自：http://m.blog.csdn.net/blog/qqyangwang/8513662

0 0