javascript - 让 iframe 元素滑入屏幕

Question

我正在努力实现这一目标:

当用户点击按钮时，iframe 元素将从左侧滑入屏幕，在 1 秒内覆盖一半屏幕。当用户点击屏幕上的其他任何地方(而不是 iframe 中)时，iframe 会滑出。

我是 HTML 和 JavaScript 的新手，所以我希望有人可以向我提供有关如何实现它的详细信息。

我目前的想法是:1. 将 iframe position-left 初始化为某个点 -1000px，使其在屏幕之外。2. 当用户按下按钮时，使用CSS transition 将position-left 移动到0px

我遇到的问题是:1. 当用户点击屏幕上的其他地方时，如何让 iframe 消失2.如果我想让iframe从右边滑动怎么办？

我的想法正确吗？我对编码 HTML 的细节不熟悉，所以虽然我知道这个概念，但我在将它转换为代码时遇到了问题。

如有任何帮助，我们将不胜感激。

附言我还想实现一些很酷的功能，但它们不是必需的:iframe 不会在用户单击按钮时出现，而是在屏幕上的任意位置用鼠标/手指滑动时出现。

Answer 1

以下是我对您的情况的解释:http://jsfiddle.net/5TXvF/

为了设置盒子，我使用了你让盒子向左偏移的想法:

<a href="#" class="flying-activate">Fly It Out</a>

<div id="flying-box">
    <!-- Content or iFrame -->
    <iframe src="http://www.google.ca" />
</div>

在这种情况下，您不一定需要使用 iframe，即 CSS:

html,
body {
    height: 100%;
}

#flying-box {
    background: blue;
    height: 100%;
    left: -50%;
    position: fixed;
    top: 0;
    width: 50%;
    z-index: 100;
}

#flying-box iframe {
    height: 100%;
    width: 100%;
}

根据你的描述，我假设你想要覆盖一半的页面，所以用 height: 100% 定义你的 HTML 和 BODY 很重要，这样你的 DIV 也可以延伸到页面的高度。

附带的 jQuery 是这样的:

  $(document).ready(function() {
    var flying_on = false;

    $('a.flying-activate').click(function(e) {
        $('#flying-box').animate({left: 0}, 1000, function() {
            flying_on = true;
        });

        e.preventDefault();
        e.stopPropagation();
    });

    $('body').click(function(e) {
        if (e.target.id != 'flying-box') {
            $('#flying-box').animate({left: '-50%'}, 1000, function() {
                flying_on = false;
            });
        }
    });
});

flying_on 变量用于跟踪该状态。第一个函数是激活在 1 秒内滑入的 DIV。为了让 DIV 关闭点击其他任何地方，我正在监听 body 上的点击，只要用户点击的 ID 不在飞行框所在的位置，它就会关闭。