ajax - 現在のビューポートの位置に従って、特定の div の画像を中央に配置する方法は?

Question

ajax を使用してコンテンツの読み込み中に素敵なアニメーションを作成しようとしています。「コンテンツ」でdivをリロードするときに表示アイコンを使用したいのですが、CSSだけでそれを行うことができるかわかりません。

アイコンは:

1. 常に「コンテンツ」のあるdivの中央に水平に
2. 常に「コンテンツの可視部分」の中央に垂直に
3. メニューを非表示にするスライドアニメーション中、アニメーション全体の間、「コンテンツの表示部分」の垂直方向の中央に留まる必要があります。

「コンテンツの見える部分」に合わせて縦中央揃えができない場合は、ブラウザのビューポートに合わせて画像を中央揃えにすればOKです。

[編集] :

これが私のフィドルです: http://jsfiddle.net/QWB9x/74/とおそらく変更する必要がある部分:

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}

Answer 1

これは私に最適です:)

function loadNewContent(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {

 $("#hide_button").on("click", function () {
      $(this).closest(".bottom").toggleClass("left_hided");
      $(".loaderCont").toggleClass("left_hided2");
 });

 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
     $(".loaderCont").addClass("loading");
     setTimeout(loadNewContent, 2000);
 });
});

CSS:

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
     height: 100px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
    width: calc(100% - 140px);
    float: right;
}

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
    background-color: rgba(255, 0, 0, 0.6);
    height: 100%;
    width: calc(100% - 140px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
    background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
    position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
     height: 32px;
     width: 32px;
}

.loading {
    z-index: 9001;
}

JSFiddle: http://jsfiddle.net/ZRwzr/1/

Answer 2

位置を割り当てるために多くのスクリプトを作成する必要はありません。シンプルなcssでできます。

ローダーをその親に対して相対的にするだけです。高さと幅を割り当て、次の css 部分を実行します。

.loader{
    position: relative;
    top: -half of the height;
    left: -half of the width;
    margin-top: 50%;
    margin-left: 50%;
}

すべてのデバイスで動作します

Answer 3

これを要件に合わせて機能させるには、JavaScript を使用して、固定位置の div を使用して読み込み中の画像を表示部分のどこに配置する必要があるかを判断し、ユーザーがウィンドウのサイズを変更したりウィンドウをスクロールしたりするときに再配置する必要があります。希望の位置に。

$(window).scroll(function() {
    scrolling();
});

$(window).resize(function() {
   scrolling(); 
});

scrolling();

function scrolling() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $('#thediv')[0].offsetTop;
    var offsetHeight = $('#thediv')[0].offsetHeight;

    var offsetWidth = $('#thediv')[0].offsetWidth;

    var top = offsetTop - scrollTop;
    top = top < 0 ? 0 : top;

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
    bottom = bottom < 0 ? 0 : bottom;

    $('.image').css('top', top);
    $('.image').css('bottom', bottom);
    $('.image').css('width', offsetWidth);
}

div の幅を変更する場合は、常にscrolling()関数を呼び出して位置を再計算できるようにする必要があることに注意してください。

CSS を使用して中央に表示できるように、読み込み中の画像を背景画像として固定 div に追加しました。

.image {
    position: fixed;
    text-align:center;
    background-image:url('http://i.stack.imgur.com/FhHRx.gif');
    background-repeat:no-repeat;
    background-position:center center;
    background-color:rgba(255,255,255,.4);
}

これがJSFiddle http://jsfiddle.net/QWB9x/89/です

Answer 4

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: calc(50% + 55px);
    display: block;
}

上記は問題の半分を解決します.javascriptで左を動的に更新する必要があります.

Answer 5

z-index の例を使用します:-

 <div style="z-index:100;">loading image</div>