問題是作者使用了固定的後臺附件,沒有它的腳本更復雜。 如果我理解正確,你想通過點擊按鈕來控制位置。
我創建了一個片段,它會給你一個很好的起點: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);
});
});
});
我在Chrome,FF和IE11上試過了你的小提琴,對我來說這似乎很好。如在,我看不到你的意思是「這個圖像表現怪異」。你能多解釋一下嗎? – 2014-12-19 10:14:21
好吧,我會試着解釋一下: 每當用戶調整屏幕大小或向下滾動時,圖像顯示不正確。 我期望的是圖像向上滾動。 就我而言,它是滾動用戶看到的。我想這是由於'background-attachment:fixed'屬性,但我還沒有找到其他解決方案。將['background-attachment'屬性設置爲'滾動'](http://jsfiddle.net/011rjqqt/3/)會給我想要的滾動行爲,但它會消除'填充圖像'的效果。 – Patte 2014-12-19 10:28:18
對不起,我還在掙扎......你的意思是你想要圖像和酒吧響應以適應不同的屏幕尺寸? – 2014-12-19 10:38:33