我想做一种预加载器,在页面加载时,而不是根据加载的百分比调整div宽度的大小,我想根据加载的百分比更改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;
}

最佳答案

Example

保持背景颜色不变,只需通过jQuery更改不透明度值即可

$("#preloader").each(function() {
  $(this).css('opacity','0');
  //function to calculate the % loading ...
  $(this).animate({opacity: '1'}, 4000);
});


更新...
由于不能使用opacity属性,因此可以使用以下两种方法之一:

* P.S:效率不高,但是他们在工作

第一种方法:您可以创建多个css类,每个类中都定义一个背景色,每个类名称都有一些数值,我们可以在加载时通​​过循环来更改它,并使用如下代码中的toggle class属性:

EXAMPLE1: 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-颜色类别示例

.pClass3c{ background-color:#dddeff; }
.pClass4c{ background-color:#c8c9ff; }
.pClass5c{ background-color:#aaacff; }
.pClass6c{ background-color:#989aff; }
.pClass7c{ background-color:#7c7fff; }


此方法更容易且更灵活,因为它很容易更改颜色或添加更多的淡入淡出,并且要记住,颜色类的数量越多,动画就越平滑,加载值就越精确。



EXAMPLE1: Using .PNG as background image

第二种方法您可以使用CSS image-sprite并根据%loading为背景imag的最高值设置动画,例如:

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插件,您可以检查是否查看页面源代码。

关于jquery - 根据加载的百分比更改背景色饱和度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16375151/

10-11 22:43
查看更多