我想做一个预加载器,当页面加载时,我想根据% loaded来改变div的宽度,而不是根据% loaded来改变div的背景色饱和度。
老实说,我不介意如果我必须设置#fff,然后将颜色渐变为红色,我只是不知道如何喜欢饱和度的变化,或者随着%加载而褪色的百分比。
这是我一直在尝试的:
JS
$("#preloader").each(function() {
$(this)
.data("origColor", $(this).backgroundColor())
.backgroundColor('#f4421a')
.animate({
backgroundColor: $(this).data("origColor")
}, 1200);
});
CSS @-webkit-animation changeColor {
0% { background-color: $white; }
100% { background-color: $orange; }
}
.js div#preloader {
@include position(fixed, $z:9999);
width: 100%;
height: 100%;
overflow: visible;
background: $loading no-repeat center center, $header-bg-mobile repeat top left, lighten($black,70%);
-webkit-animation: changeColor 2s linear infinite;
}
示例
保持background-color不变,只是通过jQuery改变不透明度值
$("#preloader").each(function() {
$(this).css('opacity','0');
//function to calculate the % loading ...
$(this).animate({opacity: '1'}, 4000);
});
更新…因为你不能使用不透明度属性,你可以使用以下两种方法之一:
* p。S:效率不高,但他们在工作
第一个方法:你可以创建多个css类在每个类中定义一个背景色,每个类名都有一些数值我们可以在加载时通过循环改变我们使用toggle class属性,就像下面的代码:
示例1:background color
HTML<div id="preloader" class="pClass0c"></div>
jQuery var currClass= 0;
var TotalClasses= 15;
window.setInterval(Preloading, 200);
function Preloading(){
if (currClass < TotalClasses){
$('#preloader').toggleClass('pClass'+currClass+'c');
currClass++;
};
}
CSS - color类示例
.pClass3c{ background-color:#dddeff; }
.pClass4c{ background-color:#c8c9ff; }
.pClass5c{ background-color:#aaacff; }
.pClass6c{ background-color:#989aff; }
.pClass7c{ background-color:#7c7fff; }
这种方法更容易,更灵活,因为它很容易改变颜色或添加更多淡出,并且记住颜色类的数量越多,动画越平滑,%加载值越精确。
示例1:使用。png作为背景图像
第二种方法你可以使用CSS image-sprite和动画背景图像的顶部值取决于%加载,如:
var BGpos= -15500;
$('#preloader').css( {backgroundPosition: "0 -15500px"} );
window.setInterval(Preloading, 200);
function Preloading(){
if (BGpos < 0){
$('#preloader').css({backgroundPosition: "0 "+BGpos+"px"});
BGpos= BGpos+ 1500;
};
}
但是在这个方法中,你需要一个叫做jquery.bgpos.js
的jquery插件,你可以检查你是否查看了页面的源代码。