1

所以我目前正在开发一个具有响应式布局的单页网站。在较小的屏幕上，我使用动画滚动插件在内容 div 之间导航，但在较大的屏幕上，我使用插件来简单地切换这些 div 的可见性。

我遇到的问题是，如果在页面加载后调整窗口大小，我需要更改脚本。我认为 $(window).resize 可以解决问题，但它似乎不起作用并继续使用最初加载的脚本而不是执行正确的脚本。.anchorAnimate 和 .anchorTog 是我正在使用的插件，但我不认为它们是这里的问题。有需要我可以发帖。

代码：

$(document).ready(function() {

    var w = $(window).width();

    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }

    $(window).resize(function(){
        if(w <= 767) {
            $('a.anchorLink').anchorAnimate();
        }
        if(w >= 768) {
            $('a.anchorLink').anchorTog();
        }
    });
});
4

2 回答 2

1

在您的代码中，变量“w”超出了 resize 函数的范围。“w”只有在文档达到其就绪状态时才会成为窗口宽度。要解决此问题，您可以在 resize 函数中重新声明变量，以便每次调整大小时，我们都会检查宽度：

$(window).resize(function(){
    var w = $(window).width();
    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }
});
于 2013-09-25T17:31:32.943 回答
0

响应式设计通常意味着 CSS，而不是 JavaScript。

在 CSS3 中，您可以使用 @media 定义要支持的屏幕尺寸的尺寸。

如果您使用 CSS，您可以拥有硬件加速动画，这比您在 JavaScript 中所做的任何事情都要流畅得多。

谷歌“响应式设计 css3”，你会得到很多例子。

于 2013-09-25T16:20:39.277 回答