jquery - 通过上下滚动控制图像的淡入淡出

Question

上下滚动时是否可以控制图片的淡入淡出效果？我想实现如下效果。我有一个垂直对齐的图像列表，并非所有图像都在屏幕上可见，所以我必须滚动浏览它们。如果我这样做，移出视口(viewport)的图像应该淡出到 50% 不透明度，而移入视口(viewport)的图像应该淡出到 100%。淡入和淡出这两种效果都应该在视口(viewport)的某个点触发，因为我有可能有一个非常大的图像高度，所以如果淡出效果在顶部开始时就不是很有用了图像靠近视口(viewport)的顶部。如果效果可以在图像底部距离视口(viewport)例如 100px 时开始，那就更好了。

现在我正在使用以下代码。但老实说，我真的不知道如何编辑代码来实现我之前提到的事情。

var target = $('div');
var targetHeight = target.outerHeight();

$(document).scroll(function(e){
    var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
    if(scrollPercent >= 0){
        target.css('opacity', scrollPercent);
    }
});

http://jsfiddle.net/meEf4/

Answer 1

您想在滚动时循环遍历每个图像并使用偏移量来了解图像何时进入视口(viewport)。像这样:

$(window).scroll(function() {
    var viewportTop = $(window).scrollTop();
    var viewportBottom = $(window).scrollTop()+$(window).height();
    $('img').each(function(){
       var imgTop = $(this).offset().top;
       // continue your code here to compare viewportTop and imgTop etc.
    });
});