分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 如何根据当前视口位置将图像置于特定div中？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

图标应该：

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

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

[编辑]：

这是我的小提琴：http://jsfiddle.net/QWB9x/74/和可能应该改变的部分：

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

解决方法

这对我来说效果最好:)

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.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;
}