如何根据当前视口位置将图像置于特定div中？

我正在尝试使用ajax加载内容时创建漂亮的动画。 我想在使用“内容”重新加载div时使用显示图标，但我想不出是否可以只用CSS做到这一点。

图标应该：

1. 水平始终位于div的中心，带有“内容”
2. 垂直始终位于“内容的可见部分”的中心
3. 在幻灯片动画中隐藏菜单时，应将整个动画保留在“内容的可见部分”的垂直中心。

如果根据“内容的可见部分”不可能进行垂直居中，则可以根据浏览器的视口使图像居中。

[编辑] ：

这是我的小提琴： 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://sofzh.miximages.com/css/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

为了满足您的要求，您需要使用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()函数以便重新计算位置。

我还将加载图像作为背景图像添加到固定div，以便我们可以使用CSS来居中。

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

这是JSFiddle http://jsfiddle.net/QWB9x/89/

Answer 3

您不需要执行大量脚本操作来为其分配位置。 你可以用简单的CSS来做到这一点。

只需使加载程序相对于其父项。 指定高度和宽度并执行以下css部分。

.loader {position：relative; 顶部：高度的一半; 左： – 宽度的一半; 边距：50％; 保证金左：50％; 适用于每个设备

Answer 4

使用z-index示例： –

  
loading image 

Answer 5

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

以上将解决问题的一半，你需要用javascript动态更新左边。