3

我有一个关于我正在开发的关于检测窗口何时调整大小的网站的问题。我知道这之前已经讨论过了，我已经阅读了许多讨论，但无法让它发挥作用。我只是在学习jquery。

 $(function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    {
       $('#mainbio, #footerlinks').addClass('extraWide')
    }
    else if (viewPortWidth > 1400)
    {
       $('#mainbio, #footerlinks').addClass('wide')
    }
    else if (viewPortWidth > 1000) 
    {
       $('#mainbio, #footerlinks').addClass('standard')
    }
    else if (viewPortWidth > 700)
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr,   #lastfm').addClass('narrow')
    }
    else 
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr, #lastfm').addClass('extraNarrow')
    }
 });

这是我到目前为止所拥有的，它工作正常，但仅限于初始负载。我想知道是否有人可以帮助我调整它以便它可以动态工作 - 如果我要手动调整浏览器大小而不刷新，我可以看到更改？

谢谢！

4

2 回答 2

7

您可以使用 回调此函数.resize()。

例如

var detectViewPort = function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    //...The rest of your above code.
};

$(function(){
  detectViewPort();
});

$(window).resize(function () {
   detectViewPort();
});

可能还有另一种/更好的方法，但这是我所知道的选项。

于 2013-02-25T00:19:47.187 回答
1

目前，这是一个自调用匿名函数，因此将在页面加载后立即运行（因此将运行一次）。

要让它在调整窗口大小时运行，您需要在窗口上注册调整大小事件（完整文档在此处http://api.jquery.com/resize/）。

如果您更新该行：

$（函数（）{

所以它读

$(窗口).resize(函数() {

每当调整窗口浏览器的大小时，都会调用它。

于 2013-02-25T00:19:31.253 回答