jQuery的滚动全屏背景

我有一个网站，将有多个全屏背景（当然，100％的宽度和1,024像素设置高度）jQuery的滚动全屏背景

这个脚本做什么（或应该做的）是淡出一个DIV和在滚动时，淡入另一个。

但是，为了让生活更轻松，我们使用了n-child选择器 - 这对前两个div有效，但在之后没有任何效果。

任何帮助？

$(document).ready(function(){ 
var didScroll = false; 
var $window = $(window); 

$(window).scroll(function(){ 
    didScroll = true; 
}); 

window.setInterval(function() { 
if (didScroll) { 
    if (1-$window.scrollTop()/1024 > -10) { 
     $('.item:nth-child(even)').css({opacity: 1-$window.scrollTop()/1024}); 
     $('.item:nth-child(odd)').css({opacity: 1*$window.scrollTop()/1024}); 
    } 
    didScroll = false; 
} 
}, 50); 
});

来源

2013-03-06 Palemo

可以添加小提琴使确切地说，我需要知道你需要什么？ – supersaiyan 2013-03-06 08:01:32

您可能想要将元素（图标？）包装在容器中。然后你可以做'$（'。container'）。children（）'。不完全确定你想要达到什么。 – qwerty 2013-03-06 08:08:44

第n个孩子是不限制为偶数或奇数，只要使用任何你想要的号码。例如：

$(".item:nth-child(3)").css({opacity: 1-$window.scrollTop()/1024})

编辑：

现在这样的事情应该工作：

$('.item:nth-child(1)').css({opacity: 1-$window.scrollTop()/1024}); 
    $('.item:nth-child(2)').css({opacity: 2-$window.scrollTop()/1024}); 
    $('.item:nth-child(3)').css({opacity: 3-$window.scrollTop()/1024});

的jsfiddle：http://jsfiddle.net/yDuh7/ 或者另一个问题：http://jsfiddle.net/yDuh7/1/

来源

2013-03-06 08:41:49 ewooycom

没有什么区别，但似乎只是淡化前两个div – Palemo 2013-03-06 08:51:52

好吧，它似乎在做它所假设的 - 但它在同一时间完成，无论你在哪里滚动。因此，当您滚动时，它会淡出div 1和3，而div 2和4会在您滚动时淡入。 – Palemo 2013-03-06 08:58:04

@Palemo检查我的编辑，它与你的第一个例子有点不同，但它应该淡出一个接一个的背景。 – ewooycom 2013-03-06 09:02:40

jQuery的滚动全屏背景

回答

相关问题