css - CSS/JS 渐变样式的不透明度以淡出内容

Question

我想知道是否有办法淡出（如渐变）iframe 的不透明度和其中的内容。很难解释，所以一个常见的例子是在山狮或 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：关于 fadeOut 的 jQuery API 参考。