Question

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

每当用户向下滚动或调整屏幕大小时，图像表现得很奇怪（我无法用我自己的语言描述它，请参阅jsfiddle我的意思）。我想这个问题可能与背景附件有关：固定＆＃39;属性。

请参阅：

.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的位置和背景附件属性，但我没有得到一个不错的结果。你可以看到我更新的小提琴（版本：2-4）。

你们其中一个人是否知道如何在没有显示奇怪行为的情况下使用此效果？也许有一些jQuery魔法可以帮助我实现这种效果吗？如果解决方案也支持IE 8，那将是最好的，但此时它不是必须的，因为我只想了解我做错了什么。

提前致谢。

Answer 1

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

我创建了一个代码片段，为您提供了一个很好的起点：JSnippet

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

您可以使用属性设置所需的一切：

data-loader-size - ＆gt;设定大小。
data-back-image - ＆gt;设置背面图像。
data-front-image - ＆gt;设置正面图像。
data-update-to - ＆gt;对于控件设置所需的百分比。

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

});

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

1 个答案: