0

我想制作一个预加载器，当页面加载时，而不是根据加载的百分比调整 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;
}
4

1 回答 1

1

例子

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

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

更新... 由于您不能使用 opacity 属性，您可以使用以下两种方法之一：

* PS：效率不高，但他们正在工作

第一种方法：您可以创建多个 css 类，在每个类中定义背景颜色，每个类名都有一些数值，我们可以在加载时通​​过循环更改，我们使用切换类属性，如下代码所示：

示例1：背景颜色

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

这种方法更容易、更灵活，因为它很容易改变颜色或添加更多的淡入淡出，并且记住颜色类的数量越多，动画越平滑，%loading 值越精确。

示例 1：使用 .PNG 作为背景图像

第二种方法您可以使用 CSS image-sprite 并根据 %loading 为背景图像的顶部值设置动画，例如：

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 插件，jquery.bgpos.js您可以检查您是否查看页面源。

于 2013-05-04T14:28:01.100 回答