温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-25 10:48:38 阅读:3396 作者:杨浩晨 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

 先说下简单的思路:

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> 
 这是我想出的方法来解决这个问题。希望能够看懂。如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。源码我会上传的。附件是源码。百度网盘下载地址
附件:http://down.51cto.com/data/2362175

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×