1

iframe の不透明度とその中のコンテンツを (グラデーションのように) フェードアウトする方法があるかどうか疑問に思っています。説明するのは難しいので、一般的な例は、Mountain Lion または iOs の通知センターの下部にあります。

全体的な考え方は、ユーザーが（iframeで）下にスクロールすると、コンテンツが下部で「フェードアウト」し、直線で途切れないということです。

これが CSS または Javascript で可能かどうかはわかりません。

どんな助けでも大歓迎です。ありがとう

4

3 に答える 3

1

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);。

繰り返しますが、お役に立てば幸いです。

于 2012-08-14T22:50:27.420 に答える
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);
}
于 2012-08-14T22:34:02.390 に答える
0

jQueryを使用できます。要素をフェードアウトする方法の例:

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

使用方法の詳細fadeOut：fadeOut に関する jQuery API リファレンス。

于 2012-08-14T22:28:00.527 に答える