javascript - 使 Javascript/JQuery 视差幻灯片效果适用于类

Question

我有以下脚本，并且希望使其也适用于类而不是仅适用于 id:

<script>
function parallax(){
var prlx_1 = document.getElementById('banner-welcome');
prlx_1.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>

我尝试执行以下操作，但不起作用:

<script>
function parallax(){
var prlx_1 = document.getElementsByClassName('banners');
prlx_1.style.top = -(window.pageYOffset / 8)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>

我也尝试过将其更改为 JQuery(至少我认为我希望我做到了)，但它也不起作用:

<script>
var prlx = $('.banners');
$(window).on('scroll', function () {
prlx.css({ 'top': -(window.pageYOffset / 8)+'px' });
});
});
</script>

这是两个示例，一个有效，一个无效:

第一个示例有效: http://jsfiddle.net/ecb3744t/

第二个例子不起作用 http://jsfiddle.net/3mc4dcus/

第三个示例不起作用 http://jsfiddle.net/wvtqke36/

Answer 1

我已经修改了您的第三个示例，这应该可以工作:

var prlx = $('.banners');
$(window).on('scroll', function () {
    $(prlx).css({ 'top': -(window.pageYOffset / 2)+'px' }); 
});

您的 Fiddle 不包含 jQuery，并且您的代码中存在语法错误。

fiddle :modified example 3

如果您不想使用 jQuery，请使用以下代码:

function parallax(){
    var prlx = document.getElementsByClassName('banners');
    for(var i=0; i < prlx.length; i++) {
        var elem = prlx[i];
        elem.style.top = -(window.pageYOffset / 2)+'px';        
    }
}
window.addEventListener("scroll", parallax, false);

请注意，document.getElementsByClassName() 返回一个元素数组。因此，您必须循环遍历每个元素并应用转换。

fiddle :modified example 1