Question

的JavaScript / jQuery的：

$(document).ready(function(){
    "use strict";

    var windowHeight = $(window).height();
    var homePageHeight = $('#main').height();

    if (windowHeight >= homePageHeight){
        $('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
        $('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);
    }

    $(window).resize(function() {       
        var windowHeight = $(window).height();
        var homePageHeight = $('#main').height();

        if (windowHeight >= homePageHeight){
            $('#main').css("padding-top", ((windowHeight-homePageHeight)/2));
            $('#main').css("padding-bottom", ((windowHeight-homePageHeight)/2));
        }
    });

基本上我的HTML上有一节由上面的代码处理：

<section id="main">
</section>

我知道这些代码会处理顶部屏幕的大小，但任何人都可以帮助我理解外行人的术语windowHeight and homePageHeight如何工作？如果可能的话，你只需逐行向我解释每个函数。

Answer 1

查看JQuery Docs。功能height()是您的最爱。测量高度=（元素高度） - （边距+边框宽度+元素填充）

Answer 2

分配给$(window).height();的

windowHeight是（浏览器）窗口或视口的高度。对于Web浏览器，此处的视口是可见部分。

分配到$('#main').height();的

homePageHeight是由ID main

标识的div或部分的高度

(windowHeight >= homePageHeight)检查浏览器高度是否大于#main

部分的高度

如果windowHeight大于或等于homePageHeight，则在#main

的顶部和底部添加填充

$('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
$('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);`

Answer 3

windowHeight是一个变量，它的值被设置为浏览器窗口的高度。

homePageHeight也是一个变量，它的值设置为div#main的高度。

当文档加载时，它会检查windowHeight是否大于或等于homePageHeight;如果它返回true，则使用jQuery应用一些css。

当窗口调整大小时，它会再次做类似的事情。

其余代码非常明显。如果您仍然不理解，则需要阅读Javascript和jQuery。

JavaScript / jQuery查询

3 个答案: