div始终在窗口中垂直水平居中代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了div在窗口中始终垂直水平居中效果。

即便是调节窗口的尺寸也是如此,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>犀牛前端部落</title>
<style>
#box{
  width:100px;
  height:100px;
  background-color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $(window).resize(function(){
    $('#box').css({
      position:'absolute',
      left: ($(window).width() - $('#box').outerWidth())/2,
      top: ($(window).height() - $('#box').outerHeight())/2
    });
  });
  $(window).resize();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

上面的大妈实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$(window).resize(function(){}),当调整浏览器窗口大小的时候触发此事件。

(3).$('#box').css({}),设置元素的样式值。

(4).position:'absolute',设置为绝对定位。

(5).left: ($(window).width() - $('#box').outerWidth())/2,设置元素的left属性值,为(当前窗口的宽度-元素的宽度)/2,这时候,元素的恰好实现水平居中。

(6).top: ($(window).height() - $('#box').outerHeight())/2,和上面同样的道理,实现了垂直居中效果。

(7).$(window).resize(),调用一次resize()方法,实现打开页面时候就垂直居中效果。

二.相关阅读:

(1).resize事件可以参阅jQuery resize事件一章节。

(2).css()方法可以参阅jQuery css()一章节。

(3).outerWidth()方法可以参阅jQuery outerWidth()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容