Question

向上和向下滚动时，是否可以控制图像的淡入和淡出效果？我想达到以下效果。我有一个垂直对齐的图像列表，并不是所有这些图像都在屏幕上可见，所以我必须滚动它们。如果我这样做，那么从视口移出的图像应淡出到50％的不透明度，并且移入的图像应淡入100％。效果，淡入和淡出都应该在视口的某个点触发，因为我可能有一个非常大的高度的图像，所以如果淡出效果在顶部开始时它不是很有用图像靠近视口的顶部。如果效果可以在图像底部例如接近视口的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

您希望在滚动时循环浏览每个图像并使用偏移来了解图像何时进入视口。像这样的东西：

$(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.
    });
});

通过向上和向下滚动控制图像的FadeIn和FadeOut

1 个答案: