先说下简单的思路：
1.获得窗口的大小，高度，宽度。
2.要知道显示的图片（我这里用图片举例）的大小，宽，高。（我的图片显示设置为 宽：960，高600 ）
3.简单算法，获得的浏览器宽，高 减去 图片的宽，高 除以2 就是 间隔距离了。
4.当然还有获得窗口放大，缩小的事件了。根据事件来设置（margin）。
首先将图片弄到body里面，代码如下：
<body> <div id="_total"> <div id="_back"> <img id="_mag" src="p_w_picpaths/1.jpg"/> </div> </div> </body> body 里面就只有两个div 图片套了一下。 加点 CSS 样式：（吐槽下：我对CSS 不专业。）
<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>
重点是下面的代码：
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ba-resize.js"></script>
先解释下： 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代码了。
<script type="text/javascript"> $(document).ready(function(){ // 这里是窗口刚刚打开的时候，页面中的图片就要居中显示。 //网页可见区域宽： 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>
这是我想出的方法来解决这个问题。希望能够看懂。如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。源码我会上传的。附件是源码。百度网盘下载地址
这是我想出的方法来解决这个问题。希望能够看懂。
如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。
源码我会上传的。附件是源码。
百度网盘下载地址