Jquery 根据浏览器宽度终止或执行javascript

简而言之，我只想在浏览器窗口小于特定大小时运行脚本（本例中为Flexslider）

i、 e

宽度小于480px（启动时或调整大小时）-运行Flexslider

超过480px宽（启动时或调整大小时）-杀死Flexslider并将列表项显示为“静态”块/页面元素

目前，我有以下代码（在一定程度上）可以根据浏览器宽度使用addClass和removeClass。但是，需要刷新浏览器才能在相关位置终止或执行脚本。你可能已经猜到了，我不是JS专家，但是我很想听听你的想法

HTML:

    <div id="foo">
      <ul class="slides">
        <li><img src="images/image1.jpg" width="320" height="320" alt=""></li>
        <li><img src="images/image2.jpg" width="320" height="320" alt=""></li>
        <li><img src="images/image3.jpg" width="320" height="320" alt=""></li>
      </ul>
    </div>

$(document).ready(function() { var pageWidth = $(window).width(); if (pageWidth <= 480) { $("#foo").addClass('flexslider'); $('.flexslider').flexslider({ animation: "slide", directionNav: true }); } $(window).resize(function() { if ($(window).width() > 480) { $("#foo").removeClass('flexslider'); } }); });

JS: $(document).ready(function() { var pageWidth = $(window).width(); if (pageWidth <= 480) { $("#foo").addClass('flexslider'); $('.flexslider').flexslider({ animation: "slide", directionNav: true }); } $(window).resize(function() { if ($(window).width() > 480) { $("#foo").removeClass('flexslider'); } }); }); $（文档）.ready（函数（）{ var pageWidth=$（窗口）.width（）； 如果（页宽480）{ $（“#foo”）.removeClass（'flexslider'）； } }); });

---

JS-第1版

$(document).ready(function() { var pageWidth = $(window).width(); if (pageWidth <= 480) { $("#foo").addClass('flexslider'); $('.flexslider').flexslider({ animation: "slide", directionNav: true }); } $(window).resize(function() { if ($(window).width() > 480) { $("#foo").removeClass('flexslider'); } }); });

     $(window).resize(function(){
        var windowWidth  = $(window).width();
        if (windowWidth  <= 480) {
            $("#foo").addClass('flexslider');
               $('.flexslider').flexslider({
                   animation: "slide",
                   directionNav: true
                });
        }
    $(window).resize(function() {
        if ($(window).width() > 480) {
            $("#foo").removeClass('flexslider');
        }
        });
    });

$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
如果（窗宽480）{
$（“#foo”）.removeClass（'flexslider'）；
}
});
});

---

JS-第2版

$(document).ready(function() { var pageWidth = $(window).width(); if (pageWidth <= 480) { $("#foo").addClass('flexslider'); $('.flexslider').flexslider({ animation: "slide", directionNav: true }); } $(window).resize(function() { if ($(window).width() > 480) { $("#foo").removeClass('flexslider'); } }); });

$(window).resize(function() {
        if ($(window).width() >= 480) {
            $("#foo").removeClass('flexslider');
        }
        if ($(window).width() < 480) {
            $("#foo").addClass('flexslider');
            $('#foo').flexslider({animation: "slide"});
        }
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>=480）{
$（“#foo”）.removeClass（'flexslider'）；
}
如果（$（窗口）.width（）<480）{
$（“#foo”）.addClass（'flexslider'）；
$（'#foo'）.flexslider（{动画：“幻灯片”}）；
}
});

Take

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>=480）{
$（“#foo”）.removeClass（'flexslider'）；
}
如果（$（窗口）.width（）<480）{
$（“#foo”）.addClass（'flexslider'）；
}
});

超出

$（文档）。准备好
功能

发生的是document.ready仅在加载页面时才会触发。如果要在调整页面大小后启动window.ready函数，则必须将其从document.ready函数中取出

此外，您还需要在两个函数中执行相同的操作。或者有一个单独的函数来处理添加和删除flexslider，并有
窗口。调整大小
和
文档。准备好
调用该函数。第二种方法可能更好

希望有帮助
 Take

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>=480）{
$（“#foo”）.removeClass（'flexslider'）；
}
如果（$（窗口）.width（）<480）{
$（“#foo”）.addClass（'flexslider'）；
}
});

超出
$（文档）。准备好
功能

发生的是document.ready仅在加载页面时才会触发。如果要在调整页面大小后启动window.ready函数，则必须将其从document.ready函数中取出

此外，您还需要在两个函数中执行相同的操作。或者有一个单独的函数来处理添加和删除flexslider，并有
窗口。调整大小
和
文档。准备好
调用该函数。第二种方法可能更好

希望有帮助
 我会将代码移动到一个定义的函数中，并在加载或调整页面大小时调用该函数，否则它将无法在pageload上运行。谢谢，伙计们。我已经走了一半了。如果我从一个大窗口（960px宽）调整到480px，它确实会触发Flexslider，但是当我尝试将其增加到960px宽时，Flexslider仍然保持不变。在上面添加了我的修订…谢谢你的持续帮助，@eric。尝试了上面的修订版2，当浏览器缩小到480px宽时，会启动Flexslider，但是当您尝试调整到480px以上时，Flexslider仍然会启动。。。另外，如果浏览器已经达到480px（或更低），Flexslider在调整浏览器大小之前不会启动。我会将代码移动到一个定义的函数，并在加载或调整页面大小时调用该函数，否则它不会在pageload上运行。谢谢，各位。我已经走了一半了。如果我从一个大窗口（960px宽）调整到480px，它确实会触发Flexslider，但是当我尝试将其增加到960px宽时，Flexslider仍然保持不变。在上面添加了我的修订…谢谢你的持续帮助，@eric。尝试了上面的修订版2，当浏览器缩小到480px宽时，会启动Flexslider，但是当您尝试调整到480px以上时，Flexslider仍然会启动。。。此外，如果浏览器已经达到480px（或更低），Flexslider在调整浏览器大小之前不会启动。