Question

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

即。

小于 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>

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

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"});
        }
});

Answer 1

取

    $(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调用该函数。第二种方式可能更好。

希望有所帮助。

根据浏览器宽度杀死或执行javascript

1 个答案: