0

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

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

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

我目前的想法是这样的： 1. 将 iframe position-left 初始化到某个点 -1000px 所以它不在屏幕上。2.当用户按下按钮时，使用 CSS 过渡将 position-left 移动到 0px

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

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

任何帮助，将不胜感激。

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

4

1 回答 1

3

以下是我对您的情况的解释：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;
            });
        }
    });
});

fly_on 变量用于跟踪该状态。第一个功能是在 1 秒内激活 DIV 滑入。要让 DIV 关闭单击我正在监听的其他任何地方单击身体，只要用户单击的 ID 不是飞行框所在的位置，它就会关闭。

于 2013-08-07T04:34:04.590 回答