0

私はフルスクリーンオーバーレイを持っています.現在jfiddleに設定しているので、http://jsfiddle.net/9NJP9/1/でフェードインするだけ です .フェードの代わりにやりたいことは、画面を一番下まで。滑り落ちます。ボタンをクリックすると、私のサイトは画面の高さよりも長くなりますが、サイト全体の上部からページの下部まで、画面の上部から画面の下部に表示され、誰かがスクロールしてもそこにとどまります。これを行うためにcssを操作する方法がわかりません。

これで私が得ることができるどんな助けも素晴らしいでしょう、ありがとう。

4

1 に答える 1

3

こちらhttp://jsfiddle.net/9NJP9/8/

スライド ダウン効果の場合、opacityを 0 から 1 に変更する代わりに、topプロパティを-500pxや など-50%に変更できます0。フィドルでは、からに移行するように設定しまし-100%た0。また、Webkit ブラウザー専用の CSS の代わりに、効果をクロスブラウザー互換にする必要があります。それに応じてCSSを修正しました。

.fullscreen_hide {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    z-index: 1000;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: -100%;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

.fullscreen_show {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    height: 100%;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

@MichaelGiovanniPumo が指摘したように、jQueryも試してみてください。それは生活をより快適にします。:)

于 2012-07-16T13:29:43.960 に答える