0

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

IE

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

超过480 像素宽（在启动时或调整大小时） - 终止 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>

JS： 

        $(文档).ready(函数() {
            var pageWidth = $(window).width();
            如果（页面宽度 <= 480）{
                $("#foo").addClass('flexslider');
                   $('.flexslider').flexslider({
                       动画：“幻灯片”，
                       方向导航：真
                    });
            }
        $(窗口).resize(函数() {
            if ($(window).width() > 480) {
                $("#foo").removeClass('flexslider');
            }
            });
        });

JS - 修订版 1

     $(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');
        }
        });
    });

JS - 修订版 2

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

1 回答 1

3

拿

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

功能失效$(document).ready。

发生的事情是 document.ready 仅在页面加载时触发。如果您希望在调整页面大小后触发 window.ready 函数，则必须将其从 document.ready 函数中取出

此外，您需要在这两个函数中执行相同的操作。或者有一个单独的函数来处理添加和删除 flexslider 并拥有window.resize和document.ready调用该函数。第二种方法可能更好。

希望有帮助。

于 2012-08-05T18:27:33.197 回答