我尝试根据每个当前偏移设置某些图像的不透明度.问题是,如果向下滚动,不透明度不等于所有图像.
这就是我为每张图片尝试完成的事情:
################
# #
# #
# #
# === <= opacity 1
# #
# *** <= opacity 0.6
# #
################
... <= opacity 0
目前它仅适用于前2-3张图像.所有进一步的下降不是从0-1设置,而是从0.5-40设置.
另一个问题是,如果滚动偏移为0,则隐藏所有图像…
这就是我到目前为止所做的事情:
var $win = $(window);
var $img = $('img');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
$self.css({
opacity: scrollTop / $self.offset().top
});
});
}).scroll();
http://jsfiddle.net/ARTsinn/c5SUC/0/
任何想法如何得到这项工作?
最佳答案 你可以试试
var $win = $(window);
var $img = $('img');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.prev().offset();
var pt=0;
if(prev){
pt=prev.top;
}
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
console.log(scrollTop+" / "+$self.offset().top+"-"+pt);
});
}).scroll();
var $win = $(window);
var $img = $('img');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.prev().offset();
if(prev){
var pt=0;
pt=prev.top;
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{ //SHOW FIRST IMG
$self.css({
opacity: 1
});
}
});
}).scroll();