javascript - 使图像透明并填充相对于百分比值的颜色

Question

我在 codepen 上找到了以下内容并且非常喜欢这种效果。现在我正在尝试根据我的需要进行调整，但遇到了一些问题:

每当用户向下滚动或调整屏幕大小时，图像就会表现得很奇怪(我无法用自己的话来描述它，请参阅 jsfiddle 了解我的意思)。我想这个问题可能与“背景附件:固定”属性有关。

参见:

.image {
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
    background-clip:content-box;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
.show {
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
    background-clip:content-box;
}

我尝试对 div 的位置和 background-attachment 属性进行试验，但没有得到像样的结果。你可以看到我为此更新的 fiddle (修订版:2-4)。

你们中有人知道我如何使用这种效果而不会出现奇怪的行为吗？也许有一些 jQuery 魔法可以帮助我实现这种效果？如果该解决方案也支持 IE 8 最好，但目前这不是必须的，因为我只想了解我做错了什么。

提前致谢。

Answer 1

问题是作者使用了固定的背景附件，没有它脚本会更复杂。如果我做对了，您想通过单击按钮来控制位置。

我创建了一个片段，可以为您提供一个良好的起点:JSnippet

如您所见，那里的事情更复杂，但它不使用固定背景，并允许您轻松地将“加载”更新到您想要的任何点，我没有测试过它，但它应该适用于大多数浏览器和甚至更老一次。

您可以使用属性设置所有您需要的:

• data-loader-size -> 设置大小。
• data-back-image -> 设置背景图像。
• data-front-image -> 设置正面图像。
• data-update-to -> 为控件设置你想要的百分比。

CSS:

div.loader {
    position:relative;
    background-repeat:no-repeat;
    background-attachment: scroll;
    background-clip:content-box;
    background-position:0 0;
    margin:0;
    padding:0;
}
div.loader .loaded {   
    position:absolute;
    top:0;
    left:0;
    background-repeat:no-repeat;
    background-attachment: scroll;
    background-clip:content-box;
    background-position:0 0;
    margin:0;
    padding:0;
}
div.loader .position {
    position:absolute;
    left:0;
    border-top:1px dashed black;
    width: 100%;
    text-align:center;
    margin:0;
    padding:0;
    min-height: 40px;
}
div.loader .position div {
    font-family: 'Concert One';
    background:#2f574b;
    width: 25%;
    margin:0;
    padding:5px;
    margin: 0 auto;
    text-align:center;
    border-radius: 0 0 4px 4px;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color:white;
}

HTML:

<div class="loader" 
     data-loader-size="450px 330px" 
     data-back-image="http://fdfranklin.com/usf-bull-bw.png" 
     data-front-image="http://fdfranklin.com/usf-bull.png"
>
    <div class="loaded"></div>    
    <div class="position"><div>0%</div></div>
</div>
<br><br>
<div>
    <button class="set-loader" data-update-to="0">Set 0%</button>
    <button class="set-loader" data-update-to="25">Set 25%</button>
    <button class="set-loader" data-update-to="50">Set 50%</button>
    <button class="set-loader" data-update-to="100">Set 100%</button>
</div>

jQuery:

$(function() {

var loader_class = ".loader",
    control_class=  ".set-loader";

var oLoader = {
    interval     : 10,
    timer        : null,
    upPerc       : 0,
    upHeight     : 0,
    curHeight    : 0,
    step         : 1,
    diff_bg      : 0,
    diff_top     : 0,
    size         : $(loader_class).data("loader-size").split(" "),
    heightInt    : 0,
    bimage       : $(loader_class).data("back-image"),
    fimage       : $(loader_class).data("front-image"),
    loader       : $(loader_class).children('.loaded').eq(0),
    position     : $(loader_class).children('.position').eq(0),
    pos_height   : 0
}; 
oLoader.heightInt = parseInt(oLoader.size[1],10);
oLoader.pos_height = parseInt($(oLoader.position).height(),10);

$(loader_class).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image':'url(' + oLoader.fimage + ')',
    'background-size':oLoader.size.join(' ')
});
$(oLoader.loader).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image':'url(' + oLoader.bimage + ')',
    'background-size':oLoader.size.join(' ')
});
$(oLoader.position).css({
    bottom: 0 - oLoader.pos_height
});
$(control_class).each(function(){
    $(this).click(function(){
        clearInterval(oLoader.timer);
        oLoader.upPerc = parseInt($(this).data('update-to'));
        oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt);
        oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight);   
        oLoader.curHeight = parseInt($(oLoader.loader).height(),10);
        oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);              
        oLoader.diff_bg = (oLoader.step === 1?
            (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight:
             oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
        oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10);
        oLoader.timer = setInterval(function () {
            if (oLoader.diff_bg) {
                oLoader.diff_bg--;
                oLoader.curHeight += oLoader.step;
                oLoader.diff_top  += -oLoader.step;
                oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
                oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc);
                oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc);
                $(oLoader.loader).css({ height: oLoader.curHeight });
                $(oLoader.position).css({ bottom: oLoader.diff_top  });
                $(oLoader.position).children('div').text(oLoader.calc_perc + "%");
            } else { 
                clearInterval(oLoader.timer); 
                $(oLoader.position).children('div').text(oLoader.upPerc + "%");
            }
        }, oLoader.interval);
    });
});

});