Question

我正在努力实现这个目标：

当用户点击按钮时，iframe元素将从左侧滑入屏幕，覆盖屏幕的一半超过1秒。当用户点击屏幕上的任何其他位置（而不是iframe）时，iframe会向后滑动。

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

我目前的想法是这样的： 1.将iframe位置左侧初始化为某点-1000px，使其不在屏幕之外。 2.当用户按下按钮时，使用CSS转换将位置左移动到0px

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

我的观念是否正确？我对编码HTML的细节不熟悉，所以虽然我知道这个概念，但我无法将其转换为代码。

任何帮助都将不胜感激。

P.S。此外，我想实现一些很酷的功能，但它们并不重要：当用户点击按钮但用鼠标/手指在屏幕上的任何位置滑动时，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%;
}

我假设你要从你的描述中想要覆盖半个页面，所以定义你的HTML和BODY高度很重要：100％所以你的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变量用于跟踪该状态。第一个功能是激活DIV在1秒的范围内滑动。要让DIV在我正在收听的其他任何地方点击，只要用户点击的ID不在飞行盒的位置，它就会关闭。

让iframe元素滑入屏幕

1 个答案: