0

一言で言えば、ブラウザウィンドウが特定のサイズよりも小さい場合にのみスクリプト（この場合は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（{
                       アニメーション：「スライド」、
                       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"});
        }
});
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 関数から取り出す必要があります

また、両方の関数で同じことを行う必要があります。または、フレックススライダーの追加と削除を処理する別の関数を持ち、その関数を持っwindow.resizeてdocument.ready呼び出します。2 番目の方法の方がよい可能性があります。

それが役立つことを願っています。

于 2012-08-05T18:27:33.197 に答える