Question

我想知道是否有办法淡出（如渐变）iframe的不透明度及其内部的内容。这很难解释，所以一个常见的例子就是Mountain Lion或iOs通知中心的底部。

整个想法是，当用户向下滚动（在iframe中）时，内容在底部“淡出”并且不会用直线切断。

不确定CSS或Javascript是否可行。

非常感谢任何帮助。感谢

Answer 1

如果我理解正确，你需要这样的东西： https://dl.dropbox.com/u/73603348/fadeout.html

我过去所做的是在滚动内容的底部创建一个叠加元素。很简单。

标记：

<div class="content">
    <div class="container">
        [ content here ]
    </div>
    <div class="fader"></div>
</div>

风格：

.content {
    width: 600px;
    background: #fff;
    margin: 50px auto 0;
    overflow: auto;
    position: relative;
}

.container {
    height: 500px;
    overflow: auto;
    padding: 10px;
    background: #ccc;
}

.fader {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
}

Answer 2

如果您不想加载整个jQuery库，您可以编写自己的函数来执行淡出。这是我自己尝试编写这样一个函数：

var ifrm = document.getElementById("your_frame"); //find your frame
function fadeOut(var duration) { //duration: how many millseconds you want the effect to take
    var step = 10 / duration; //step is how much the opacity will change each 10 milliseconds
    var curOpacity = 1; //at first the iframe is fully opaque.
    function animate() {
        if(curOpacity < step) {
             ifrm.style.opacity = 0; //we're done
             return;
        }
        ifrm.style.opacity = curOpacity;
        curOpacity -= step;
        setTimeout(animate, 10); //wait 10 millseconds and move to next step of animation
    }
    animate();
}

假设您希望淡出1秒钟，那么最初的fadeOut函数调用将是：fadeOut(1000);。

再次，我希望能帮助你。

Answer 3

您可以使用jQuery。关于如何淡出元素的示例：

$("#your_iframe_id").fadeOut();

有关如何使用fadeOut的更多详细信息：jQuery API reference about fadeOut。

CSS / JS渐变式不透明度淡出内容

3 个答案: