2

Web ページ内で複数のボタンをクリックできるようにし、iframe がコンテンツをスライドしてロードし、他のコンテンツをロード時にさらにノックダウンできるようにするページを作成しようとしています。

jquery .animate 関数を使用してこのスクロールを上下に行うさまざまな方法を試しましたが、何らかの理由で機能しません。

誰か提案はありますか？

$(document).ready(function() {
    $(".iframe").click(function() {
            var file = $(this).attr("data-url");
            var size = $(this).attr("data-size");
            $(this).parent('article').append("<iframe class='articleframe' height='" + size + "' src='" + file + "'>Moo</iframe>"); 
            $(this).siblings('.open').css('display','inline-block');
            $(this).hide();
        });
    $(".open").click(function() {
            $(this).hide();
            $(this).siblings('.iframe').css('display','inline-block');
            $(this).siblings('.articleframe').remove();
    });
});

<article>
    <h2>Querybox</h2>
    <h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900px"  >Load another file</h5>
    <h5 class='button open'>Hide Frame</h5>
</article>
4

1 に答える 1

0

視覚に依存している人のために:)

これを仕様に合わせて微調整する必要があるかもしれませんが、これでうまくいきます：

Javascript:

「.append()」を「.prepend()」に変更

$(document).ready(function () {
    $(".iframe").click(function () {
        var file = $(this).data("url");
        var size = $(this).data("size");
        var $one = $('#one');
        $one.prepend("<h5 class='button open'>Hide Frame</h5><div class='frame-contain'><iframe class='articleframe' height=0 src='" + file + "'></iframe></div>");
        var $wrap = $one.find('.frame-contain:first');
        $wrap.animate({
            height: size
        }, {
            duration: 1000,
            step: function (now) {
                $(this).height(now);
                $(this).nextAll('.frame-contain').offsetParent().top += now;
                $(this).find('iframe').height(now);
            },
            complete: function () {
                $(".open").click(function () {
                    $(this).next('div').slideUp(1000);
                    $(this).fadeOut('slow');
                });
            }
        });
    });
});

要素を再配置することもお勧めしますが、それはあなた次第です。<h5>ボタンを に<header>、<iframe>作品をに入れることができます<section>。思考の糧。そうすれば、ボタンが飛び散ることはありません。私の例では、このアイデアを利用しています。

HTML:

<article>
    <header>
         <h2>Querybox</h2>
         <h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900">Load another file</h5> 
    </header>
    <section id="one"></section>
</article>

CSS:

iframe, header, section, div {
    clear: left;
    position: relative;
    display: block;
}
section, div {
    width: 100%;
    max-height: 100%;
}
.open {
    clear: left;
    display: block;
}
.articleframe {
    float: left;
}

ここでのあなたのエンドゲームがよくわからないので、私は最善の解釈をしました. このコードは、設定方法が非常に非効率的であることに注意してください (jQuery を使用する非常に多くのセレクターは、非常にコード集約的です)。

物事にもっとidタグを付けて、$(document.getElementById('id'))またはを使用してそれらを参照することをお勧めします$(document.querySelector('#id'))。また、jQuery を使用する.width()と.height()、同様に大きな打撃を受けます。JavaScript ネイティブ セレクターを使用してから、.innerWidth = XXorを適用する必要があり.innerHeight = XXます。

通常、この小さなスケールでのパフォーマンスはそれほど重要ではありませんが、表示している内容とそれがブラウザーに与える影響を考えると、役立つ場合があります。

パフォーマンス向上の例: JSPerf - innerHeight と .height()

于 2013-11-06T02:29:34.943 に答える