我想在使用ajax加载内容时创建一个漂亮的动画。我想在 "内容 "重载div时使用显示图标,但是我不知道是否可以只用CSS来实现。
图标应该
如果不能按照 "内容的可见部分 "垂直居中,那么按照浏览器的视口居中也可以。
(编辑):
这是我的小提琴。http:/jsfiddle.netQWB9x74 和可能应该改变的部分。
.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, 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 http:/jsfiddle.netZRwzr1
为了满足您的要求,您需要使用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://i.stack.imgur.com/FhHRx.gif');
background-repeat:no-repeat;
background-position:center center;
background-color:rgba(255,255,255,.4);
}
这里是JSFiddle http:/jsfiddle.netQWB9x89
你不需要做那么多的脚本来给它分配一个位置。你可以用简单的css来做。
只要让加载器相对于它的父节点。指定一个高度和宽度,然后做下面的css部分。
.loader{
position: relative;
top: -half of the height;
left: -half of the width;
margin-top: 50%;
margin-left: 50%;
}
适用于所有设备
以z-index为例:-
<div style="z-index:100;">loading image</div>
.loading #img_loading {
position: fixed;
top: 50%;
left: calc(50% + 55px);
display: block;
}
以上就解决了一半的问题,你需要用javascript动态更新左边的内容。