在jQuery或JavaScript中通过滚动数组遍历数组

我已使用Lettering.js创建了<span>元素集合，其中"char*",*表示此示例中的整数。我创建这些元件的阵列如下：在jQuery或JavaScript中通过滚动数组遍历数组

var characterArray = $("[class^='char']");

我已经使用下面的费 - 耶茨随机算法：

function shuffle(array) { 
    var m = array.length, t, i; 

    // While there remain elements to shuffle… 
    while (m) { 

    // Pick a remaining element… 
    i = Math.floor(Math.random() * m--); 

    // And swap it with the current element. 
    t = array[m]; 
    array[m] = array[i]; 
    array[i] = t; 
    } 

    return array; 
}

为了操纵characterArray如下：

var disappearArray = shuffle(characterArray);

所以我目前有一个数组，其中包含一个随机排序的元素集合，我希望通过逐步滚动来迭代元素。我的目标是每次用户滚动时在阵列display:none中包含一个<span>元素，直到数组中的所有<span>元素都不显示。

我曾尝试：

$(window).scroll(function(){ 
    $.each(disappearArray, function(i, val) { 
     $(val).addClass("hidden"); 
    }); 
});

但滚动的所有元素都设置为display:none。

我该如何设置这种增量式发生？

来源

2013-12-16 hdlnd

为什么你使用这么多的类？ .class的想法是他们有共同点。 U可以考虑ID或至少添加一个类名'char'并相应地使用选择器。 – EricG

[Lettering.js]（http://letteringjs.com）jquery插件返回具有该类命名约定的跨度。 – hdlnd

你可以添加'char char *'吗？ – EricG

$（window）.scrollTop（）将返回您滚动的值的大小，因此您可能会考虑一定数量的滚动像素。说得通？ :)

$(window).scroll(function(){ 
    var scrolled = $(window).scrollTop(); 

    $.each(disappearArray, function(i, val) { 
     scrolled > i * disappearArray.length? 
     $(val).addClass("hidden") : $(val).removeClass("hidden"); 
    }); 
});

类似的东西:)希望它可以帮助你。祝你好运！

来源

2013-12-16 20:14:56 Holybreath

感谢您的快速回答！在第5行，'dissapearArray'应该是'disappearArray' – hdlnd

在jQuery或JavaScript中通过滚动数组遍历数组

回答

相关问题