2

我正在尝试编写一个页面，该页面允许在我的网页中单击多个按钮，并允许 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>按钮放入 a<header>中，将<iframe>创作放入 a<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'))or $(document.querySelector('#id'))。此外，使用 jQuery.width()也.height()大受欢迎。您应该使用 javascript 本机选择器，然后应用.innerWidth = XX或.innerHeight = XX.

通常，这种小规模的性能并不是非常重要，但考虑到您所显示的内容及其对浏览器的影响，它可能会对您有所帮助。

有关性能提升的示例： JSPerf - innerHeight vs. .height()

于 2013-11-06T02:29:34.943 回答